fix: Camera popup icon is too small and the icon on storytelling (#324)

* icon-resize * sorytelling-rollback * justify * justify-2 * pr-fix1 Co-authored-by: nina992 <nouralali992@gmail.com>
reearth · Oct 4, 2022 · e676c36 · e676c36
1 parent 3befd4c
commit e676c36
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/src/components/molecules/EarthEditor/PropertyPane/PropertyField/CameraField/index.tsx b/src/components/molecules/EarthEditor/PropertyPane/PropertyField/CameraField/index.tsx
@@ -96,7 +96,9 @@ const CameraField: React.FC<Props> = ({
       <Popup ref={popper.ref} open={open} style={popper.styles} {...popper.attributes}>
         {!onlyPose && (
           <FormGroup>
-            <FormIcon icon="marker" size={16} />
+            <FormIcon>
+              <Icon icon="marker" size={16} color={theme.properties.contentsText} />
+            </FormIcon>
             <FormFieldGroup>
               <FormFieldRow>
                 <FormWrapper>
@@ -141,7 +143,9 @@ const CameraField: React.FC<Props> = ({
         )}
         {!onlyPosition && (
           <FormGroup>
-            <FormIcon icon="camera" size={16} />
+            <FormIcon>
+              <Icon icon="camera" size={16} color={theme.properties.contentsText} />
+            </FormIcon>
             <FormFieldGroup>
               <FormFieldRow>
                 <FormWrapper>
@@ -262,11 +266,13 @@ const Popup = styled.ul<{ open: boolean }>`
 
 const FormGroup = styled.div`
   display: flex;
+  align-item: center;
 `;
 
-const FormIcon = styled(Icon)`
-  margin: 10px 10px 10px 0;
-  color: ${props => props.theme.properties.contentsText};
+const FormIcon = styled.div`
+  margin-top: auto;
+  margin-bottom: 20px;
+  width: 35.78px;
 `;
 
 const FormButtonGroup = styled.div`