chore(console): cleanup designer settings (#2544)

proofzero · Jul 25, 2023 · 653bcad · 653bcad
1 parent 16ccd49
commit 653bcad
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/apps/console/app/components/IconPicker/index.tsx b/apps/console/app/components/IconPicker/index.tsx
@@ -207,13 +207,6 @@ export default function IconPicker({
     e.stopPropagation()
   }
 
-  const appIcon =
-    icon !== '' ? (
-      <img className="rounded" src={icon} alt="Application icon" />
-    ) : (
-      <CameraIcon className="h-6 w-6 text-gray-300" aria-hidden="true" />
-    )
-
   const calculateDimensions = (
     aspectRatioWidth: number,
     aspectRatioHeight: number,
@@ -250,13 +243,23 @@ export default function IconPicker({
             style={{
               width: `${width}px`,
               height: `${height}px`,
+              backgroundImage:
+                iconUrl && iconUrl !== '' ? `url(${iconUrl})` : '',
+              backgroundSize: 'contain',
+              backgroundRepeat: 'no-repeat',
+              backgroundPosition: 'center',
             }}
             onDrop={(e) => handleDrop(e)}
             onDragOver={(e) => handleDragOver(e)}
             onDragEnter={(e) => handleDragEnter(e)}
             onDragLeave={(e) => handleDragLeave(e)}
           >
-            {appIcon}
+            {(!iconUrl || iconUrl === '') && (
+              <CameraIcon
+                className="h-6 w-6 text-gray-300"
+                aria-hidden="true"
+              />
+            )}
           </div>
 
           <div className="grid place-items-center">

diff --git a/apps/console/app/routes/apps/$clientId/designer.tsx b/apps/console/app/routes/apps/$clientId/designer.tsx
@@ -499,6 +499,7 @@ const AuthPanel = ({
                 name="color"
                 value={color.light}
                 pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"
+                maxLength={7}
                 onChange={(e) => {
                   let val = e.target.value
                   if (!val.startsWith('#')) {
@@ -510,7 +511,7 @@ const AuthPanel = ({
                     light: val,
                   })
                 }}
-                className="pl-9 pr-3 py-2 border border-gray-300 shadow-sm rounded text-sm font-normal text-gray-500 w-full"
+                className="pl-9 pr-3 py-2 border border-gray-300 shadow-sm rounded text-sm font-normal text-gray-500 w-full uppercase"
               />
 
               <Popover.Panel className="absolute z-10">
@@ -557,6 +558,7 @@ const AuthPanel = ({
                 id="colordark"
                 name="colordark"
                 value={color.dark}
+                maxLength={7}
                 pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"
                 onChange={(e) => {
                   let val = e.target.value
@@ -569,7 +571,7 @@ const AuthPanel = ({
                     dark: val,
                   })
                 }}
-                className="pl-9 pr-3 py-2 border border-gray-300 shadow-sm rounded text-sm font-normal text-gray-500 w-full"
+                className="pl-9 pr-3 py-2 border border-gray-300 shadow-sm rounded text-sm font-normal text-gray-500 w-full uppercase"
               />
 
               <Popover.Panel className="absolute z-10">