add logo preview

web/components/config/README.md

@@ -41,87 +41,4 @@ There are also a variety of other local states to manage the display of error/su
 - NOTE: you don't have to use these components. Some form groups may require a customized UX flow where you're better off using the Ant components straight up.
 
 
-## Using Ant's `<Form>` with `form-textfield`.
-UPDATE: No more `<Form>` use!
-
-~~You may see that a couple of pages (currently **Public Details** and **Server Details** page), is mainly a grouping of similar Text fields.~~
-
-~~These are utilizing the `<Form>` component, and these calls:~~
-~~- `const [form] = Form.useForm();`~~
-~~- `form.setFieldsValue(initialValues);`~~
-
-~~It seems that a `<Form>` requires its child inputs to be in a `<Form.Item>`, to help manage overall validation on the form before submission.~~
-
-~~The `form-textfield` component was created to be used with this Form. It wraps with a `<Form.Item>`, which I believe handles the local state change updates of the value.~~
-
-## Current Refactoring:
-~~While `Form` + `Form.Item` provides many useful UI features that I'd like to utilize, it's turning out to be too restricting for our uses cases.~~
-
-~~I am refactoring `form-textfield` so that it does not rely on `<Form.Item>`.  But it will require some extra handling and styling of things like error states and success messaging.~~
-
-### UI things
-I'm in the middle of refactoring somes tyles and layout, and regorganizing some CSS. See TODO list below.
-
-
----
-## Potential Optimizations
-
-- There might be some patterns that could be overly engineered!
-
-- There are also a few patterns across all the form groups that repeat quite a bit. Perhaps these patterns could be consolidated into a custom hook that could handle all the steps.
-
-
-
-## Current `serverConfig` data structure (with default values)
-Each of these fields has its own end point for updating.
-```
-{
-  streamKey: '',
-  instanceDetails: {
-    extraPageContent: '',
-    logo: '',
-    name: '',
-    nsfw: false,
-    socialHandles: [],
-    streamTitle: '',
-    summary: '',
-    tags: [],
-    title: '',
-  },
-  ffmpegPath: '',
-  rtmpServerPort: '',
-  webServerPort: '',
-  s3: {},
-  yp: {
-    enabled: false,
-    instanceUrl: '',
-  },
-  videoSettings: {
-    latencyLevel: 4,
-    videoQualityVariants: [],
-  }
-};
-
-// `yp.instanceUrl` needs to be filled out before `yp.enabled` can be turned on.
-```
-
-
-## Ginger's TODO list:
-
-- cleanup 
-  - more consitent constants
-  - cleanup types
-  - cleanup style sheets..? make style module for each config page? (but what about ant deisgn overrides?)
-- redesign
-  - label+form layout - put them into a table, table of rows?, includes responsive to stacked layout
-  - change Encoder preset into slider
-  - page headers - diff color? 
-  - fix social handles icon in table
-  - things could use smaller font?
-  - Design, color ideas
-
-    https://uxcandy.co/demo/label_pro/preview/demo_2/pages/forms/form-elements.html
-
-    https://www.bootstrapdash.com/demo/corona/jquery/template/modern-vertical/pages/forms/basic_elements.html
-- maybe convert common form pattern to custom hook?
 

web/components/config/edit-instance-details.tsx

@@ -17,6 +17,7 @@ import {
   FIELD_PROPS_YP,
   FIELD_PROPS_NSFW,
 } from '../../utils/config-constants';
+import { NEXT_PUBLIC_API_HOST } from '../../utils/apis';
 
 import { UpdateArgs } from '../../types/config-section';
 import ToggleSwitch from './form-toggleswitch';
@@ -102,7 +103,13 @@ export default function EditInstanceDetails() {
         initialValue={instanceDetails.logo}
         onChange={handleFieldChange}
       />
-
+      {instanceDetails.logo && (
+        <img
+          src={`${NEXT_PUBLIC_API_HOST}${instanceDetails.logo}`}
+          alt="uploaded logo"
+          className="logo-preview"
+        />
+      )}
       <br />
 
       <Title level={3} className="section-title">

web/pages/upgrade.tsx

@@ -53,7 +53,7 @@ export default function Logs() {
   }
 
   return (
-    <div>
+    <div className="upgrade-page">
       <Title level={2}>
         <a href={release.html_url}>{release.name}</a>
       </Title>

web/styles/ant-overrides.scss

@@ -23,7 +23,6 @@ td.ant-table-column-sort,
   color: var(--default-text-color)
 }
 
-
 h1.ant-typography, 
 h2.ant-typography, 
 h3.ant-typography, 

web/styles/config-public-details.scss

@@ -38,6 +38,13 @@
   }
   .instance-details-container {
     width: 100%;
+
+    .logo-preview {
+      display: inline-block;
+      margin: -1em 0 1em 11em;
+      height: 120px;
+      border: 1px solid var(--white-25);
+    }
   }
   .social-items-container {
     background-color: var(--container-bg-color-alt);

web/styles/pages.scss

@@ -10,3 +10,11 @@
     }
   }
 }
+
+
+.upgrade-page {
+  h2,h3 {
+    color: var(--pink);
+    font-size: 1.25em;
+  }
+}