fix themes for starter layout

coinvise · May 12, 2021 · 4937ae2 · 4937ae2
1 parent 4d28ef1
commit 4937ae2
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 9 deletions.
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -42,7 +42,11 @@ export const LayoutProperty: React.FC<{
           onChange={e => setLayoutConfig({ [p.name]: e.target.value })}
         />
       ) : p.type === "select" ? (
-        <Select options={p.options.map(value => ({ value }))} />
+        <Select
+          options={p.options.map(value => ({ value }))}
+          value={(layoutConfig[p.name] as string) ?? ""}
+          onChange={value => setLayoutConfig({ [p.name]: value })}
+        />
       ) : null}
     </Field>
   );

diff --git a/src/layouts/colours.ts b/src/layouts/colours.ts
@@ -1,4 +1,11 @@
-export const colourThemes = {
+export interface ColourTheme {
+  fg: string;
+  bg: string;
+  gray: string;
+  pink: string;
+}
+
+export const colourThemes: Record<string, ColourTheme> = {
   light: {
     fg: "#131126",
     bg: "#ffffff",

diff --git a/src/layouts/starterLayout.tsx b/src/layouts/starterLayout.tsx
@@ -2,9 +2,11 @@ import { GetCSSFn, ILayout, LayoutComponent } from "../types";
 import { colourThemes } from "./colours";
 import { gString } from "./utils";
 
+const defaultTheme = "dark";
+
 const getCSS: GetCSSFn = config => {
-  const theme = gString(config, "theme", "light");
-  const colours = colourThemes[theme.toLowerCase()];
+  const theme = gString(config, "Theme", defaultTheme).toLowerCase();
+  const colours = colourThemes[theme];
 
   return `
   .top {
@@ -13,6 +15,8 @@ const getCSS: GetCSSFn = config => {
     display: flex;
     align-items: flex-end;
     justify-content: flex-end;
+    background-color: ${colours.bg};
+    color: ${colours.fg};
   }
 
     .rlogo {
@@ -54,8 +58,9 @@ const getCSS: GetCSSFn = config => {
 };
 
 const Component: LayoutComponent = ({ config }) => {
+  const theme = gString(config, "Theme", defaultTheme).toLowerCase();
   const rlogo =
-    config.theme === "dark"
+    theme === "dark"
       ? "https://railway.app/brand/logo-light.svg"
       : "https://railway.app/brand/logo-dark.svg";
 
@@ -88,6 +93,7 @@ export const starterLayout: ILayout = {
       name: "Theme",
       type: "select",
       options: ["Light", "Dark"],
+      default: defaultTheme,
     },
     {
       name: "Name",

diff --git a/src/layouts/utils.ts b/src/layouts/utils.ts
@@ -12,6 +12,6 @@ export const gString = (
   name: string,
   defaultValue?: string,
 ): string => {
-  const value = layoutConfig[name];
-  return (Array.isArray(value) ? value.join(", ") : value) ?? defaultValue;
+  const value = layoutConfig[name] ?? defaultValue;
+  return Array.isArray(value) ? value.join(", ") : value;
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -23,7 +23,7 @@ const Home: NextPage = () => {
       {isMounted && (
         <section tw="grid gap-8 grid-cols-1 md:grid-cols-3">
           <Config />
-          <OGImage />
+          <Viewer />
         </section>
       )}
     </main>
@@ -73,7 +73,7 @@ export const Config: React.FC = () => {
   );
 };
 
-export const OGImage: React.FC = () => {
+export const Viewer: React.FC = () => {
   const [config] = useConfig();
   const [layoutConfig] = useLayoutConfig();