Fix viewbox of all the icons

theodo · Nov 4, 2019 · d53ea52 · d53ea52
1 parent d0f9cbf
commit d53ea52
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 34 deletions.
diff --git a/frontend/src/icons/Add/Add.tsx b/frontend/src/icons/Add/Add.tsx
@@ -13,15 +13,30 @@ export default class Add extends React.Component<Props> {
       <svg
         width={this.props.width}
         height={this.props.height}
-        viewBox="0 0 24 24"
+        viewBox="0 0 76 76"
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path 
-          d="M 12 2 C 6.486 2 2 6.486 2 12 C 2 17.514 6.486 22 12 22 C 17.514 22 22 17.514 22 12 C 22 6.486 17.514 2 12 2 z M 12 4 C 16.411 4 20 7.589 20 12 C 20 16.411 16.411 20 12 20 C 7.589 20 4 16.411 4 12 C 4 7.589 7.589 4 12 4 z M 11 8 L 11 11 L 8 11 L 8 13 L 11 13 L 11 16 L 13 16 L 13 13 L 16 13 L 16 11 L 13 11 L 13 8 L 11 8 z"
+        <g
+          id="Add"
           stroke={this.props.color}
+          stroke-width="1"
           fill={this.props.color}
-        />
+          fill-rule="evenodd"
+        >
+          <g
+            id="Group"
+            fill={this.props.color}
+            fill-rule="nonzero"
+            stroke={this.props.color}
+            stroke-width="0.5"
+          >
+            <path
+              d="M38,0 C17.0468,0 0,17.0468 0,38 C0,58.9532 17.0468,76 38,76 C58.9532,76 76,58.9532 76,38 C76,17.0468 58.9532,0 38,0 Z M38,5 C56.195375,5 71,19.804625 71,38 C71,56.195375 56.195375,71 38,71 C19.804625,71 5,56.195375 5,38 C5,19.804625 19.804625,5 38,5 Z M33.25,19 L33.25,33.25 L19,33.25 L19,42.75 L33.25,42.75 L33.25,57 L42.75,57 L42.75,42.75 L57,42.75 L57,33.25 L42.75,33.25 L42.75,19 L33.25,19 Z"
+              id="Shape"
+            />
+          </g>
+        </g>
       </svg>
     );
   }

diff --git a/frontend/src/icons/Checkmark/Checkmark.tsx b/frontend/src/icons/Checkmark/Checkmark.tsx
@@ -13,16 +13,30 @@ export default class Checkmark extends React.Component<Props> {
       <svg
         width={this.props.width}
         height={this.props.height}
-        viewBox="0 0 24 24"
+        viewBox="0 0 76 76"
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+        <g
+          id="Checkmark"
           stroke={this.props.color}
-          strokeWidth={this.props.strokeWidth || "4"}
+          stroke-width="1"
           fill={this.props.color}
-        />
+          fill-rule="evenodd"
+        >
+          <g
+            id="Group"
+            fill={this.props.color}
+            fill-rule="nonzero"
+            stroke={this.props.color}
+            stroke-width={this.props.strokeWidth}
+          >
+            <polygon
+              id="Path"
+              points="24.1818182 60.119403 6.04545455 36.2985075 0 44.238806 24.1818182 76 76 7.94029851 69.9545455 0"
+            />
+          </g>
+        </g>
       </svg>
     );
   }

diff --git a/frontend/src/icons/Close/Close.tsx b/frontend/src/icons/Close/Close.tsx
@@ -17,20 +17,20 @@ export default class Close extends React.Component<Props> {
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <g id="Close-Icon" stroke="none" fill="none" fillRule="evenodd" strokeLinecap="round">
-          <path
-            d="M2.04268536,73.9573146 L74.1217669,1.87823315"
-            id="Path-2"
+        <g id="Close" stroke={this.props.color} stroke-width="5" fill={this.props.color} fill-rule="evenodd">
+          <g
+            id="Group"
+            transform="translate(-0.000000, 0.000000)"
             stroke={this.props.color}
-            strokeWidth={this.props.strokeWidth || "4"}
-          />
-          <path
-            d="M2.04268536,73.9573146 L74.1217669,1.87823315"
-            id="Path-2"
-            stroke={this.props.color}
-            strokeWidth={this.props.strokeWidth || "4"}
-            transform="translate(38.500000, 37.500000) scale(-1, 1) translate(-38.500000, -37.500000) "
-          />
+            stroke-width={this.props.strokeWidth}
+          >
+            <path d="M0,76 L76,0" id="Path-2" />
+            <path
+              d="M1.01333333,76 L77.0133333,0"
+              id="Path-2"
+              transform="translate(39.013333, 38.000000) scale(-1, 1) translate(-39.013333, -38.000000) "
+            />
+          </g>
         </g>
       </svg>
     );

diff --git a/...mentSettings/Components/AuditParameterTable/AddAuditParameterRow/AddAuditParameterRow.tsx b/...mentSettings/Components/AuditParameterTable/AddAuditParameterRow/AddAuditParameterRow.tsx
@@ -105,7 +105,7 @@ export const AddAuditParameterRow: React.FunctionComponent<Props> = ({
         <AddIcon
           color={colorUsage.projectSettingsIconColor}
           width="24px"
-          strokeWidth="20"
+          strokeWidth="15"
         />
         <AddAuditParameterButtonLabel>
           {intl.formatMessage({ id: 'ProjectSettings.add_audit_parameter' })}
@@ -143,14 +143,14 @@ export const AddAuditParameterRow: React.FunctionComponent<Props> = ({
           <CheckmarkIcon
             color={colorUsage.projectSettingsIconColor}
             width="16px"
-            strokeWidth="3"
+            strokeWidth="5"
           />
         </AuditParameterRowButton>
         <AuditParameterRowButton onClick={cancel}>
           <CloseIcon
             color={colorUsage.projectSettingsIconColor}
             width="13px"
-            strokeWidth="20"
+            strokeWidth="15"
           />
         </AuditParameterRowButton>
       </AddAuditParameterButtonsContainer >

diff --git a/...nvironmentSettings/Components/AuditParameterTable/AuditParameterRow/AuditParameterRow.tsx b/...nvironmentSettings/Components/AuditParameterTable/AuditParameterRow/AuditParameterRow.tsx
@@ -128,7 +128,7 @@ export const AuditParameterRow: React.FunctionComponent<Props> = ({
           <Close
             color={colorUsage.projectSettingsIconColor}
             width="13px"
-            strokeWidth="20"
+            strokeWidth="15"
           />
         </AuditParameterRowButton>
       </AuditParameterDeleteContainer >

diff --git a/frontend/src/pages/MembersSettings/MembersSettings.tsx b/frontend/src/pages/MembersSettings/MembersSettings.tsx
@@ -197,7 +197,7 @@ const MembersSettings: React.FunctionComponent<Props> = ({
                       <Close
                         color={colorUsage.projectSettingsIconColor}
                         width="13px"
-                        strokeWidth="20"
+                        strokeWidth="15"
                       />
                     </Style.MemberAdminDeleteButton>)}
               </Style.MemberAdminDeleteContainer >

diff --git a/frontend/src/pages/PagesAndScriptsSettings/Components/PageTable/AddPageRow/AddPageRow.tsx b/frontend/src/pages/PagesAndScriptsSettings/Components/PageTable/AddPageRow/AddPageRow.tsx
@@ -79,7 +79,7 @@ export const AddPageRow: React.FunctionComponent<Props> = ({
         <AddIcon
           color={colorUsage.projectSettingsIconColor}
           width="24px"
-          strokeWidth="20"
+          strokeWidth="15"
         />
         <AddPageButtonLabel>
           {intl.formatMessage({ id: 'ProjectSettings.add_page' })}
@@ -104,14 +104,14 @@ export const AddPageRow: React.FunctionComponent<Props> = ({
           <CheckmarkIcon
             color={colorUsage.projectSettingsIconColor}
             width="16px"
-            strokeWidth="3"
+            strokeWidth="5"
           />
         </PageButton>
         <PageButton onClick={cancel}>
           <CloseIcon
             color={colorUsage.projectSettingsIconColor}
             width="13px"
-            strokeWidth="20"
+            strokeWidth="15"
           />
         </PageButton>
       </AddPageButtonsContainer >

diff --git a/frontend/src/pages/PagesAndScriptsSettings/Components/PageTable/PageRow/PageRow.tsx b/frontend/src/pages/PagesAndScriptsSettings/Components/PageTable/PageRow/PageRow.tsx
@@ -90,7 +90,7 @@ export const PageRow: React.FunctionComponent<Props> = ({
           <Close
             color={colorUsage.projectSettingsIconColor}
             width="13px"
-            strokeWidth="20"
+            strokeWidth="15"
           />
         </PageButton>
       </PageDeleteContainer >

diff --git a/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/AddScript/AddScript.tsx b/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/AddScript/AddScript.tsx
@@ -29,7 +29,7 @@ export const AddScript: React.FunctionComponent<InjectedIntlProps & Props> = ({
         <Add
           color={colorUsage.projectSettingsIconColor}
           width="24px"
-          strokeWidth="20"
+          strokeWidth="15"
         />
         <AddScriptButtonLabel>
           {intl.formatMessage({id: 'ProjectSettings.add_script'})}

diff --git a/...tend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptModal/ScriptModal.tsx b/...tend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptModal/ScriptModal.tsx
@@ -137,7 +137,7 @@ export const ScriptModal: React.FunctionComponent<Props> = ({
         : `ProjectSettings.script_confirm_creation`})}
       </ConfirmButton>
       <CloseContainer onClick={close} >
-        <Close color={colorUsage.graphModalToggleButton} />
+        <Close width="20px" height="20px" strokeWidth="5" color={colorUsage.graphModalToggleButton} />
       </CloseContainer>
     </Modal>
     {state.loading || editState.loading ? <Loader/> : null}

diff --git a/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptRow/ScriptRow.tsx b/frontend/src/pages/PagesAndScriptsSettings/Components/ScriptTable/ScriptRow/ScriptRow.tsx
@@ -86,7 +86,7 @@ export const ScriptRow: React.FunctionComponent<Props> = ({
           <Close
             color={colorUsage.projectSettingsIconColor}
             width="13px"
-            strokeWidth="20"
+            strokeWidth="15"
           />
         </ScriptDeleteButton>
       </ScriptDeleteContainer >