Unfiy admin create page style files

src/pages/admin/AdminCreateCommon.tsx

@@ -1,7 +1,7 @@
-@import "../../assets/scss/globals";
+import styled from "styled-components";
+import { colors }from "@theme/colors";
 
-
-.post-create-page {
+const AdminCreateCommon = styled.main`
   width: 100%;
 
   fieldset {
@@ -35,8 +35,8 @@
   }
 
   button {
-    background-color: color(blue1);
-    color: color(white1);
+    background-color: ${colors.blue1};
+    color: ${colors.white};
     padding: 0.5rem 1rem;
     border: none;
     outline: none;
@@ -52,4 +52,6 @@
       }
     }
   }
-}
+`;
+
+export default AdminCreateCommon;

src/pages/admin/AdminFeedPage.tsx

@@ -8,10 +8,10 @@ import { formatRelative } from "date-fns";
 import { th } from "date-fns/esm/locale";
 import AddIcon from "@assets/img/add-icon.png";
 
-export interface AdminFeedPageProps {
+interface AdminFeedPageProps {
   staticContext: StaticContext;
 }
-export interface AdminFeedPageState {
+interface AdminFeedPageState {
   feed: Post[];
   error?: string;
 }

src/pages/admin/EventCreatePage.scss

@@ -1,55 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.event-create-page {
-  width: 100%;
-
-  fieldset {
-    border: none;
-    padding: 0;
-    margin: 1rem 0;
-  }
-
-  option {
-    padding: 4px 8px;
-    cursor: pointer;
-  }
-
-  input[type="text"],
-  textarea {
-    padding: 0.5rem 0.5rem;
-    border: none;
-    overflow: visible;
-    box-sizing: border-box;
-  }
-
-  input[type="text"],
-  textarea,
-  select {
-    width: 100% !important;
-  }
-
-  legend {
-    font-weight: bold;
-    margin: 0.5rem 0;
-  }
-
-  button {
-    background-color: color(blue1);
-    color: color(white1);
-    padding: 0.5rem 1rem;
-    border: none;
-    outline: none;
-    cursor: pointer;
-  }
-
-  .checkbox {
-    label {
-      display: flex;
-
-      input {
-        margin-right: 0.5rem;
-      }
-    }
-  }
-}

src/pages/admin/EventCreatePage.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Helmet } from "react-helmet";
-import "./EventCreatePage.scss";
 import Form from "react-jsonschema-form";
+import AdminCreateCommon from "./AdminCreateCommon";
 import { Tag, getTags } from "@models/Tag";
 import { SignupForm, getForms } from "@models/SignupForm";
 import { createEvent, getEvent, updateEvent, Event } from "@models/Event";
@@ -9,6 +9,7 @@ import DatetimeWidget from "@components/Widgets/DatetimeWidget/DatetimeWidget";
 import SectionDividerWidget from "@components/Widgets/SectionDividerWidget/SectionDividerWidget";
 import MarkdownEditorWidget from "@components/Widgets/MarkdownEditorWidget";
 
+
 const widgets = {
   datetime: DatetimeWidget,
   section_divider: SectionDividerWidget,
@@ -312,7 +313,7 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
       : "Create Event";
 
     return (
-      <div className="event-create-page">
+      <AdminCreateCommon>
         <Helmet>
           <link rel="canonical" href="https://sik.ayy.fi/admin/events/create" />
         </Helmet>
@@ -328,7 +329,7 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
           onError={this.onError}
           onFocus={this.onFocus} />
         {error && <div className="error">{error}</div>}
-      </div>
+      </AdminCreateCommon>
     );
   }
 }

src/pages/admin/FeedCreatePage.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Helmet } from "react-helmet";
 import Form from "react-jsonschema-form";
 import { RouteComponentProps } from "react-router-dom";
-import "./FeedCreatePage.scss";
+import AdminCreateCommon from "./AdminCreateCommon";
 import { Tag, getTags } from "@models/Tag";
 import { createPost, getPost, updatePost } from "@models/Feed";
 import DatetimeWidget from "@components/Widgets/DatetimeWidget/DatetimeWidget";
@@ -206,7 +206,7 @@ class FeedCreatePage extends React.Component<FeedCreatePageProps, FeedCreatePage
       : "Create Post";
 
     return (
-      <div className="post-create-page">
+      <AdminCreateCommon>
         <Helmet>
           <link rel="canonical" href="https://sik.ayy.fi/admin/feed/create" />
         </Helmet>
@@ -222,7 +222,7 @@ class FeedCreatePage extends React.Component<FeedCreatePageProps, FeedCreatePage
           onError={this.onError}
           onFocus={this.onFocus} />
         {error && <div className="error">{error}</div>}
-      </div>
+      </AdminCreateCommon>
     );
   }
 }

src/pages/admin/JobAdCreatePage.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Helmet } from "react-helmet";
 import Form from "react-jsonschema-form";
 import { RouteComponentProps } from "react-router-dom";
+import AdminCreateCommon from "./AdminCreateCommon";
 import { JobAd, getJobAd, createJobAd, updateJobAd } from "@models/JobAd";
 import DatetimeWidget from "@components/Widgets/DatetimeWidget/DatetimeWidget";
 import SectionDividerWidget from "@components/Widgets/SectionDividerWidget/SectionDividerWidget";
@@ -159,7 +160,7 @@ const JobAdCreatePage: React.FC<JobAdCreatePageProps> = ({ match: { params: { id
     : "Create Ad";
 
   return (
-    <div className="post-create-page">
+    <AdminCreateCommon>
       <Helmet>
         <link rel="canonical" href="https://sik.ayy.fi/admin/jobads/create" />
       </Helmet>
@@ -176,7 +177,7 @@ const JobAdCreatePage: React.FC<JobAdCreatePageProps> = ({ match: { params: { id
         onError={onError}
         onFocus={onFocus} />
       {error && <div className="error">{error}</div>}
-    </div>
+    </AdminCreateCommon>
   );
 }
 

src/pages/admin/SignupCreatePage.scss

@@ -1,55 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.signup-create-page {
-  width: 100%;
-
-  fieldset {
-    border: none;
-    padding: 0;
-    margin: 1rem 0;
-  }
-
-  option {
-    padding: 4px 8px;
-    cursor: pointer;
-  }
-
-  input[type="text"],
-  textarea {
-    padding: 0.5rem 0.5rem;
-    border: none;
-    overflow: visible;
-    box-sizing: border-box;
-  }
-
-  input[type="text"],
-  textarea,
-  select {
-    width: 100%;
-  }
-
-  legend {
-    font-weight: bold;
-    margin: 0.5rem 0;
-  }
-
-  button {
-    background-color: color(blue1);
-    color: color(white1);
-    padding: 0.5rem 1rem;
-    border: none;
-    outline: none;
-    cursor: pointer;
-  }
-
-  .checkbox {
-    label {
-      display: flex;
-
-      input {
-        margin-right: 0.5rem;
-      }
-    }
-  }
-}

src/pages/admin/SignupCreatePage.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { Helmet } from "react-helmet";
 import { Link } from "react-router-dom";
-import "./SignupCreatePage.scss";
 import Form from "react-jsonschema-form";
+import AdminCreateCommon from "./AdminCreateCommon";
 import { createForm, getForm, updateForm, SignupForm } from "@models/SignupForm";
 import DatetimeWidget from "@components/Widgets/DatetimeWidget/DatetimeWidget";
 import SignupQuestionsWidget from "@components/Widgets/SignupQuestionsWidget";
@@ -205,7 +205,7 @@ class SignupCreatePage extends React.Component<SignupCreatePageProps, SignupCrea
       : "Create Sign-up form";
 
     return (
-      <div className="signup-create-page">
+      <AdminCreateCommon>
         <Helmet>
           <link rel="canonical" href="https://sik.ayy.fi/admin/feed/create" />
         </Helmet>
@@ -224,7 +224,7 @@ class SignupCreatePage extends React.Component<SignupCreatePageProps, SignupCrea
           onError={this.onError}
           onFocus={this.onFocus} />
         {error && <div className="error">{error}</div>}
-      </div>
+      </AdminCreateCommon>
     );
   }
 }