territory branding ui/ux cleanup, general cleanup

Author: Soxasora

api/acm/index.js

@@ -1,30 +1,25 @@
 import AWS from 'aws-sdk'
-// TODO: boilerplate
 
 AWS.config.update({
   region: 'us-east-1'
 })
 
-const config = {
-  s3ForcePathStyle: process.env.NODE_ENV === 'development'
-}
+const config = {}
 
 export async function requestCertificate (domain) {
-  // for local development, we use the LOCALSTACK_ENDPOINT which
-  // is reachable from the host machine
+  // for local development, we use the LOCALSTACK_ENDPOINT
   if (process.env.NODE_ENV === 'development') {
     config.endpoint = process.env.LOCALSTACK_ENDPOINT
   }
 
-  // TODO: Research real values
   const acm = new AWS.ACM(config)
   const params = {
     DomainName: domain,
     ValidationMethod: 'DNS',
     Tags: [
       {
         Key: 'ManagedBy',
-        Value: 'stackernews'
+        Value: 'stacker.news'
       }
     ]
   }
@@ -34,8 +29,6 @@ export async function requestCertificate (domain) {
 }
 
 export async function describeCertificate (certificateArn) {
-  // for local development, we use the LOCALSTACK_ENDPOINT which
-  // is reachable from the host machine
   if (process.env.NODE_ENV === 'development') {
     config.endpoint = process.env.LOCALSTACK_ENDPOINT
   }

api/resolvers/branding.js

@@ -54,8 +54,6 @@ export default {
         throw new GqlInputError('invalid branding')
       }
 
-      // TODO: validation, even of logo and favicon.
-
       return await models.customBranding.upsert({
         where: { subName },
         update: {

components/form.js

@@ -23,7 +23,7 @@ import textAreaCaret from 'textarea-caret'
 import 'react-datepicker/dist/react-datepicker.css'
 import useDebounceCallback, { debounce } from './use-debounce-callback'
 import { FileUpload } from './file-upload'
-import { AWS_S3_URL_REGEXP } from '@/lib/constants'
+import { AWS_S3_URL_REGEXP, MEDIA_URL } from '@/lib/constants'
 import { whenRange } from '@/lib/time'
 import { useFeeButton } from './fee-button'
 import Thumb from '@/svgs/thumb-up-fill.svg'
@@ -1411,12 +1411,23 @@ export function ColorPicker ({ label, groupClassName, name, ...props }) {
 }
 
 export function BrandingUpload ({ label, groupClassName, name, ...props }) {
-  const [, , helpers] = useField({ ...props, name })
+  const [field, , helpers] = useField({ ...props, name })
+  const [tempId, setTempId] = useState(field.value)
+
+  const handleSuccess = useCallback((id) => {
+    setTempId(id)
+    helpers.setValue(id)
+  }, [helpers])
 
   return (
     <FormGroup label={label} className={groupClassName}>
+      <img
+        src={tempId ? `${MEDIA_URL}/${tempId}` : '/favicon.png'}
+        alt={name}
+        style={{ objectFit: 'contain', position: 'relative', width: '100%', height: '100%' }}
+      />
       <Avatar
-        onSuccess={(id) => helpers.setValue(id)}
+        onSuccess={handleSuccess}
       />
     </FormGroup>
   )

components/territory-branding-form.js

@@ -4,7 +4,6 @@ import { useToast } from './toast'
 import { customBrandingSchema } from '@/lib/validate'
 import { SET_CUSTOM_BRANDING } from '@/fragments/brandings'
 import AccordianItem from './accordian-item'
-import SnIcon from '@/svgs/sn.svg'
 
 export default function BrandingForm ({ sub }) {
   const [setCustomBranding] = useMutation(SET_CUSTOM_BRANDING)
@@ -62,7 +61,7 @@ export default function BrandingForm ({ sub }) {
         <ColorPicker groupClassName='col-4' label='secondary color' name='secondary' />
       </div>
       <AccordianItem
-        header={<div style={{ fontWeight: 'bold', fontSize: '92%' }}>more colors</div>}
+        header={<div className='fw-bold text-muted'>more colors</div>}
         body={
           <div className='row'>
             <ColorPicker groupClassName='col-4' label='info color' name='info' />
@@ -72,44 +71,18 @@ export default function BrandingForm ({ sub }) {
         }
       />
       <AccordianItem
-        header={<div style={{ fontWeight: 'bold', fontSize: '92%' }}>logo and favicon</div>}
+        header={<div className='fw-bold text-muted'>logo and favicon</div>}
         body={
           <div className='row'>
             <div className='col-2'>
               <label className='form-label'>logo</label>
               <div style={{ position: 'relative', width: '100px', height: '100px', border: '1px solid #dee2e6', borderRadius: '5px', overflow: 'hidden' }}>
-                {sub?.customBranding?.logoId
-                  ? (
-                    <img
-                      src={`${process.env.NEXT_PUBLIC_MEDIA_URL}/${sub.customBranding.logoId}`}
-                      alt='Logo'
-                      style={{ width: '100%', height: '100%', objectFit: 'contain' }}
-                    />
-                    )
-                  : (
-                    <div style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                      <SnIcon style={{ fill: sub?.customBranding?.colors?.primary || '#FADA5E' }} width={36} height={36} />
-                    </div>
-                    )}
                 <BrandingUpload name='logoId' />
               </div>
             </div>
             <div className='col-2'>
               <label className='form-label'>favicon</label>
               <div style={{ position: 'relative', width: '100px', height: '100px', border: '1px solid #dee2e6', borderRadius: '5px', overflow: 'hidden' }}>
-                {sub?.customBranding?.faviconId
-                  ? (
-                    <img
-                      src={`${process.env.NEXT_PUBLIC_MEDIA_URL}/${sub.customBranding.faviconId}`}
-                      alt='Favicon'
-                      style={{ width: '100%', height: '100%', objectFit: 'contain' }}
-                    />
-                    )
-                  : (
-                    <div style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                      <img src='/favicon.png' alt='Favicon' style={{ width: '50%', height: '50%', objectFit: 'contain' }} />
-                    </div>
-                    )}
                 <BrandingUpload name='faviconId' />
               </div>
             </div>