Merge pull request #224 from cozy/feat/VER-606

feat: Replace icon in UnlockForm modal if no OIDC
cozy · Jul 1, 2024 · d8d85d5 · d8d85d5
2 parents 3476997 + d3bd32c
commit d8d85d5
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 10 deletions.
diff --git a/assets/icon-cozy-security.svg b/assets/icon-cozy-security.svg
diff --git a/src/components/IconCozySecurity.jsx b/src/components/IconCozySecurity.jsx
@@ -4,12 +4,79 @@ import React from 'react'
 
 function SvgIconCozySecurity(props) {
   return (
-    <svg width={96} height={64} {...props}>
-      <path
-        fill="#FFF"
-        fillRule="evenodd"
-        d="M80 32c8.837 0 16 7.163 16 16s-7.163 16-16 16-16-7.163-16-16 7.163-16 16-16zm0 8c-2.206 0-4 1.794-4 4v2h-1c-.552 0-1 .456-1 .995v8.01c0 .55.456.995 1.002.995h9.996c.553 0 1.002-.456 1.002-.995v-8.01A.995.995 0 0085 46h-1v-2c0-2.206-1.795-4-4-4zm0 8.5c.826 0 1.5.672 1.5 1.5 0 .552-.305 1.032-.75 1.29v2.46a.751.751 0 01-1.5 0v-2.46A1.49 1.49 0 0178.5 50a1.5 1.5 0 011.5-1.5zM47.755 0c4.455 0 8.665 1.689 11.85 4.762 2.779 2.679 4.507 6.147 4.97 9.9 8.201.724 14.74 7.229 15.374 15.339L80 30c-9.941 0-18 8.059-18 18H32.946C23.6 48 16 40.507 16 31.297c0-4.393 1.716-8.542 4.833-11.681a16.942 16.942 0 0110.096-4.903c.452-3.772 2.185-7.26 4.975-9.95C39.09 1.689 43.298 0 47.754 0zM80 42c1.103 0 2 1.121 2 2.5V46h-4v-1.5c0-1.379.897-2.5 2-2.5zM55.386 28a1.132 1.132 0 00-1.113 1.154c.011.203.02.3.056.51.04.227.096.46.172.692-3.7 3.16-9.297 3.168-13.007.023.165-.49.233-.942.233-1.234a1.13 1.13 0 00-1.104-1.143 1.136 1.136 0 00-1.157 1.1c0 .11-.04.36-.135.618-.153.419-.41.771-.802 1.017a1.136 1.136 0 00-.333 1.597 1.127 1.127 0 001.538.323 4.21 4.21 0 00.505-.375C42.426 34.054 45.163 35 47.986 35c2.83 0 5.573-.95 7.764-2.73.16.141.332.27.517.387a1.134 1.134 0 001.307-1.848l-.101-.073-.077-.048a1.9 1.9 0 01-.546-.589 2.312 2.312 0 01-.316-1.003A1.128 1.128 0 0055.386 28z"
-      />
+    <svg viewBox="0 0 104 104" fill="none" {...props}>
+      <g filter="url(#icon-connect_svg__filter0_ddd_8318_41471)">
+        <rect x={16} y={12} width={72} height={72} rx={36} fill="#fff" />
+        <path
+          d="M28 50.5c0 7.364 5.97 13.333 13.333 13.333h21.334C70.03 63.833 76 57.863 76 50.5c0-6.53-4.693-11.962-10.89-13.11C63.962 31.193 58.53 26.5 52 26.5c-6.53 0-11.962 4.693-13.11 10.89C32.693 38.538 28 43.97 28 50.5z"
+          fill="#B3D3FF"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M54 50.584A5.001 5.001 0 0052 41a5 5 0 00-2 9.584V55a2 2 0 104 0v-4.416z"
+          fill="#297EF2"
+        />
+      </g>
+      <defs>
+        <filter
+          id="icon-connect_svg__filter0_ddd_8318_41471"
+          x={0}
+          y={0}
+          width={104}
+          height={104}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy={4} />
+          <feGaussianBlur stdDeviation={8} />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
+          <feBlend
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_8318_41471"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy={2} />
+          <feGaussianBlur stdDeviation={2} />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
+          <feBlend
+            in2="effect1_dropShadow_8318_41471"
+            result="effect2_dropShadow_8318_41471"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feMorphology
+            radius={0.5}
+            operator="dilate"
+            in="SourceAlpha"
+            result="effect3_dropShadow_8318_41471"
+          />
+          <feOffset />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+          <feBlend
+            in2="effect2_dropShadow_8318_41471"
+            result="effect3_dropShadow_8318_41471"
+          />
+          <feBlend
+            in="SourceGraphic"
+            in2="effect3_dropShadow_8318_41471"
+            result="shape"
+          />
+        </filter>
+      </defs>
     </svg>
   )
 }

diff --git a/src/components/UnlockForm.jsx b/src/components/UnlockForm.jsx
@@ -117,7 +117,7 @@ const UnlockForm = props => {
             {canAuthWithOIDC ? (
               <Icon icon={KeychainIcon} size={64} className="u-mb-half" />
             ) : (
-              <CloudIcon className="u-mb-half" />
+              <CloudIcon className="u-mb-half" size={104} />
             )}
             <Typography variant="h3" gutterBottom>
               {canAuthWithOIDC ? t('unlock.title-oidc') : t('unlock.title')}