fix(color-picker-icon): color picker icon added to create type and ed…

…it type modal
stakwork · Oct 2, 2024 · 81a3a35 · 81a3a35
1 parent 7c94f52
commit 81a3a35
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 23 deletions.
diff --git a/public/svg-icons/ColorPickerIcon.svg b/public/svg-icons/ColorPickerIcon.svg
diff --git a/src/components/Icons/ColorPickerIcon.tsx b/src/components/Icons/ColorPickerIcon.tsx
@@ -0,0 +1,13 @@
+/* eslint-disable */
+import React from 'react'
+
+const ColorPickerIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg width="1em" height="1em" viewBox="0 0 8 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M5.5884 4.12155L3.88306 2.41429C3.8396 2.37079 3.80894 2.32471 3.79108 2.27605C3.77323 2.22738 3.7643 2.17524 3.7643 2.11963C3.7643 2.06401 3.77323 2.01206 3.79108 1.96379C3.80894 1.91553 3.8396 1.86964 3.88306 1.82614L5.5884 0.118886C5.63185 0.0753881 5.67788 0.0446995 5.72649 0.0268199C5.7751 0.00894031 5.82719 0 5.88275 0C5.9383 0 5.99019 0.00894031 6.0384 0.0268199C6.08662 0.0446995 6.13245 0.0753881 6.1759 0.118886L7.88125 1.82614C7.9247 1.86964 7.95536 1.91573 7.97321 1.96439C7.99107 2.01306 8 2.0652 8 2.12081C8 2.17643 7.99107 2.22838 7.97321 2.27664C7.95536 2.32491 7.9247 2.37079 7.88125 2.41429L6.1759 4.12155C6.13245 4.16505 6.08642 4.19574 6.03781 4.21362C5.9892 4.23149 5.93711 4.24043 5.88155 4.24043C5.826 4.24043 5.77412 4.23149 5.7259 4.21362C5.67768 4.19574 5.63185 4.16505 5.5884 4.12155ZM0 3.21787V0.804477C0 0.68544 0.0402151 0.585661 0.120645 0.505141C0.201076 0.424621 0.300743 0.384361 0.419648 0.384361H2.83035C2.94925 0.384361 3.04891 0.424621 3.12934 0.505141C3.20977 0.585661 3.24999 0.68544 3.24999 0.804477V3.21787C3.24999 3.3369 3.20977 3.43668 3.12934 3.5172C3.04891 3.59772 2.94925 3.63798 2.83035 3.63798H0.419648C0.300743 3.63798 0.201076 3.59772 0.120645 3.5172C0.0402151 3.43668 0 3.3369 0 3.21787ZM4.35715 7.57988V5.16649C4.35715 5.04746 4.39737 4.94768 4.4778 4.86716C4.55823 4.78664 4.65789 4.74638 4.77679 4.74638H7.18749C7.3064 4.74638 7.40607 4.78664 7.4865 4.86716C7.56693 4.94768 7.60714 5.04746 7.60714 5.16649V7.57988C7.60714 7.69892 7.56693 7.7987 7.4865 7.87922C7.40607 7.95974 7.3064 8 7.18749 8H4.77679C4.65789 8 4.55823 7.95974 4.4778 7.87922C4.39737 7.7987 4.35715 7.69892 4.35715 7.57988ZM0 7.57988V5.16649C0 5.04746 0.0402151 4.94768 0.120645 4.86716C0.201076 4.78664 0.300743 4.74638 0.419648 4.74638H2.83035C2.94925 4.74638 3.04891 4.78664 3.12934 4.86716C3.20977 4.94768 3.24999 5.04746 3.24999 5.16649V7.57988C3.24999 7.69892 3.20977 7.7987 3.12934 7.87922C3.04891 7.95974 2.94925 8 2.83035 8H0.419648C0.300743 8 0.201076 7.95974 0.120645 7.87922C0.0402151 7.7987 0 7.69892 0 7.57988Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export default ColorPickerIcon
diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx
@@ -19,6 +19,7 @@ import { colors } from '~/utils'
 import { CreateCustomNodeAttribute } from './CustomAttributesStep'
 import MediaOptions from './MediaOptions'
 import { convertAttributes, parsedObjProps, parseJson } from './utils'
+import ColorPickerIcon from '~/components/Icons/ColorPickerIcon'
 
 const defaultValues = {
   type: '',
@@ -473,7 +474,6 @@ export const Editor = ({
                     <Flex mb={12}>
                       <Text>Select Parent</Text>
                     </Flex>
-
                     <AutoComplete
                       isLoading={parentsLoading}
                       onSelect={(e) => {
@@ -483,23 +483,32 @@ export const Editor = ({
                       options={parentOptions}
                       selectedValue={resolvedParentValue()}
                     />
+
                     {displayParentError && <StyledError>A parent type must be selected</StyledError>}
                   </Flex>
+
                   <Flex>
                     <Flex mb={12}>
                       <Text>Type name</Text>
                     </Flex>
                     <Flex mb={12}>
-                      <TextInput
-                        id="cy-item-name"
-                        maxLength={250}
-                        name="type"
-                        placeholder="Enter type name"
-                        rules={{
-                          ...requiredRule,
-                        }}
-                        value={parent}
-                      />
+                      <InputIconWrapper>
+                        <InputWrapper>
+                          <TextInput
+                            id="cy-item-name"
+                            maxLength={250}
+                            name="type"
+                            placeholder="Enter type name"
+                            rules={{
+                              ...requiredRule,
+                            }}
+                            value={parent}
+                          />
+                        </InputWrapper>
+                        <ColorPickerIconWrapper>
+                          <ColorPickerIcon />
+                        </ColorPickerIconWrapper>
+                      </InputIconWrapper>
                     </Flex>
                   </Flex>
                 </>
@@ -510,18 +519,25 @@ export const Editor = ({
                       <Text>Name</Text>
                     </Flex>
                     <Flex mb={12}>
-                      <TextInput
-                        dataTestId="cy-item-name"
-                        defaultValue={selectedSchema?.type}
-                        id="cy-item-name"
-                        maxLength={250}
-                        name="type"
-                        placeholder="Enter type name"
-                        rules={{
-                          ...requiredRule,
-                        }}
-                        value={parent}
-                      />
+                      <InputIconWrapper>
+                        <InputWrapper>
+                          <TextInput
+                            dataTestId="cy-item-name"
+                            defaultValue={selectedSchema?.type}
+                            id="cy-item-name"
+                            maxLength={250}
+                            name="type"
+                            placeholder="Enter type name"
+                            rules={{
+                              ...requiredRule,
+                            }}
+                            value={parent}
+                          />
+                        </InputWrapper>
+                        <ColorPickerIconWrapper>
+                          <ColorPickerIcon />
+                        </ColorPickerIconWrapper>
+                      </InputIconWrapper>
                     </Flex>
                   </Flex>
                   <Flex mb={12}>
@@ -685,3 +701,25 @@ const HeaderText = styled(Text)`
   text-align: left;
   color: ${colors.white};
 `
+
+const ColorPickerIconWrapper = styled.span`
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  margin-left: 12px;
+  color: ${colors.colorPickerThing};
+  background: ${colors.THING};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+const InputIconWrapper = styled(Flex)`
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+`
+
+const InputWrapper = styled(Flex)`
+  width: 320px;
+`
diff --git a/src/utils/colors/index.tsx b/src/utils/colors/index.tsx
@@ -5,6 +5,7 @@ export const colors = {
   bluePressState: 'rgb(57, 97, 220)',
   addAttributeBtn: 'rgba(107, 122, 141, 0.25)',
   blueTextAccent: 'rgb(130, 180, 255)',
+  colorPickerThing: 'rgba(255, 158, 239, 1)',
   body: 'rgb(21, 30, 39)',
   boostBg1: 'rgb(32, 63, 62)',
   budgetExplanationModalBg: 'rgb(21, 28, 35)',