feat: update checkbox and home icon styles

.cursorrules

@@ -1,6 +1,7 @@
 # General
 
-- Don't hallucinate. If you don't know the answer, say so.
+- Do not add comments to the code especially if it is obvious what the code is
+  doing. Only add comments if really necessary.
 - You are an expert in the following:
   - TypeScript
   - JavaScript

src/assets/scss/style.scss

@@ -84,3 +84,30 @@ body.popup {
     background-color: #f9f9f9;
   }
 }
+
+.round-checkbox {
+  border-radius: 50% !important;
+  margin-top: 0 !important;
+
+  &:checked {
+    background-color: $primary;
+    border-color: $primary;
+  }
+}
+
+.form-check {
+  display: flex;
+  align-items: center;
+
+  .form-check-input {
+    margin-top: 0 !important;
+  }
+
+  .form-check-label {
+    margin-left: 0.4rem;
+    margin-top: 0.1rem;
+    line-height: 1.125rem;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}

src/assets/ts/components/asset-save-success.tsx

@@ -1,10 +1,11 @@
-interface SuccessProps {
-  assetDashboardLink: string;
-}
-
 import { CheckMark } from '@/components/check-mark';
 import { useDispatch } from 'react-redux';
 import { navigateToProposal } from '@/utils/navigation';
+import { HomeIcon } from '@/components/home-icon';
+
+interface SuccessProps {
+  assetDashboardLink: string;
+}
 
 export const AssetSaveSuccess: React.FC<SuccessProps> = ({
   assetDashboardLink,
@@ -46,7 +47,7 @@ export const AssetSaveSuccess: React.FC<SuccessProps> = ({
               className="btn btn-primary d-flex align-items-center justify-content-center"
               onClick={handleHomeButtonClick}
             >
-              <i className="bi bi-house-fill"></i>
+              <HomeIcon width={16} height={16} />
             </button>
           </div>
         </section>

src/assets/ts/components/home-icon.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+
+interface HomeIconProps {
+  width?: number;
+  height?: number;
+  className?: string;
+}
+
+export const HomeIcon: FC<HomeIconProps> = ({
+  width = 16,
+  height = 16,
+  className = '',
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 168 231"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M37.0851 155.432L6.54627 137.798C4.62149 136.685 2.9505 135.071 1.75707 133.006C0.563651 130.94 0.00181166 128.683 0.00181166 126.458V89.9405C0.00181166 82.6208 1.84813 75.2073 5.76938 68.4185C9.68773 61.6297 15.187 56.3173 21.5183 52.6643L109.369 1.91903C111.55 0.660664 114.03 0 116.552 0C118.986 0 121.454 0.616104 123.711 1.91903L167.336 27.1202C165.074 25.8173 162.611 25.1934 160.174 25.1934C157.656 25.1934 155.177 25.8618 152.995 27.1202L65.1432 77.8577C58.8118 81.5107 53.3155 86.8231 49.3972 93.6119C45.473 100.402 43.6325 107.814 43.6325 115.134V151.654C43.6325 153.16 42.8469 154.626 41.4481 155.432C40.0493 156.241 38.388 156.186 37.0851 155.432ZM163.587 33.6037C162.53 32.9925 161.376 32.6834 160.166 32.6834C158.962 32.6834 157.766 33.0002 156.726 33.6037L123.395 52.856L160.478 74.2714C161.781 75.0251 163.442 75.0803 164.838 74.2714C166.237 73.4654 167.019 71.9988 167.019 70.4934V39.5546C167.019 37.1095 165.706 34.8262 163.587 33.6037ZM136.453 85.3296L160.794 99.3895C162.629 100.448 164.224 101.985 165.356 103.953C166.492 105.919 167.025 108.066 167.025 110.186V115.977V142.743C167.025 148.979 165.375 155.126 162.259 160.526C159.147 165.925 154.651 170.425 149.254 173.543L61.3926 224.28C60.3522 224.884 59.1617 225.201 57.9528 225.201C56.7458 225.201 55.595 224.892 54.5304 224.28C52.4197 223.059 51.1061 220.783 51.1061 218.339V187.035C51.1061 184.914 50.5704 182.768 49.4351 180.799L105.623 148.348C111.025 145.231 115.522 140.73 118.637 135.332C119.74 133.418 120.658 131.415 121.388 129.346C122.714 125.568 123.4 121.571 123.4 117.549V85.3509C123.4 83.8455 124.184 82.3789 125.582 81.5729C126.982 80.7669 128.64 80.8193 129.946 81.5729L136.453 85.3296ZM43.6317 191.363V218.348C43.6317 223.302 46.2 228.111 50.7863 230.762L7.16829 205.572C2.57477 202.915 0 198.101 0 193.148V166.527C0 165.023 0.785606 163.555 2.18149 162.747C3.58027 161.94 5.24254 161.995 6.54446 162.747L37.3952 180.564C39.229 181.623 40.8234 183.159 41.9587 185.127C43.096 187.096 43.6317 189.244 43.6317 191.363Z"
+      />
+    </svg>
+  );
+};

src/assets/ts/components/proposal.tsx

@@ -60,7 +60,7 @@ export const Proposal: React.FC = () => {
         <section>
           <div className="form-check">
             <input
-              className="form-check-input shadow-none"
+              className="form-check-input shadow-none round-checkbox"
               id="with-auth-check"
               type="checkbox"
               checked={saveAuthentication}

src/assets/ts/components/save-auth-warning.tsx

@@ -19,8 +19,8 @@ export const SaveAuthWarning: React.FC<SaveAuthWarningProps> = ({
     <div className="mt-2" id="with-auth-check-info" hidden={hidden}>
       <div className="alert alert-warning">
         <p className="mb-0">
-          Warning: a determined attacker with physical access to your digital
-          sign could extract these saved credentials for
+          <strong>Warning:</strong> a determined attacker with physical access
+          to your digital sign could extract these saved credentials for
           <span className="break-anywhere text-monospace" id="hostname">
             <strong>{` ${currentHostname} `}</strong>
           </span>

src/assets/ts/components/settings.tsx

@@ -8,6 +8,7 @@ import { getCompany, getUser } from '@/main';
 import { PopupSpinner } from '@/components/popup-spinner';
 import { navigateToProposal } from '@/utils/navigation';
 import { handleSignOut } from '@/utils/auth';
+import { HomeIcon } from '@/components/home-icon';
 
 export const Settings: React.FC = () => {
   const dispatch = useDispatch<AppDispatch>();
@@ -84,7 +85,7 @@ export const Settings: React.FC = () => {
               className="btn btn-primary d-flex align-items-center justify-content-center"
               onClick={handleHomeButtonClick}
             >
-              <i className="bi bi-house-fill"></i>
+              <HomeIcon />
             </button>
           </div>
         </section>

src/assets/ts/components/sign-in-success.tsx

@@ -3,6 +3,7 @@ import { useDispatch } from 'react-redux';
 import { navigateToProposal } from '@/utils/navigation';
 import { useState } from 'react';
 import { handleSignOut } from '@/utils/auth';
+import { HomeIcon } from '@/components/home-icon';
 
 export const SignInSuccess: React.FC = () => {
   const dispatch = useDispatch();
@@ -46,7 +47,7 @@ export const SignInSuccess: React.FC = () => {
               className="btn btn-primary d-flex align-items-center justify-content-center"
               onClick={handleHomeButtonClick}
             >
-              <i className="bi bi-house-fill"></i>
+              <HomeIcon width={16} height={16} />
             </button>
           </div>
         </section>