feat: refactor credential input and service input and use different svg for reset icon

packages/frontend/src/components/CredentialInput.module.css

@@ -1,35 +1,25 @@
 .credentialsInputContainer {
-  position: relative;
   display: flex;
-  align-items: center;
 }
-
-.credentialInput {
-  flex: 1;
-  padding-right: 40px; /* Space for the reset button */
-}
-
 .resetCredentialButton {
-  position: absolute;
-  right: 10px;
+  margin-top: 5px;
+  margin-left: 5px;
   top: 6px;
+  padding: 0;
   background-color: transparent;
   border: none;
-  color: rgb(104, 104, 104);
+  color: rgb(255, 255, 255);
   border-radius: var(--borderRadius);
   cursor: pointer;
-  transition:
-    color 0.3s ease,
-    transform 0.2s;
+  transition: transform 0.2s;
 }
 
 .resetCredentialButton:hover {
-  color: black;
-  transform: scale(1.2) rotateZ(180deg) translateY(2px);
+  transform: scale(1.2);
 }
 
 .resetCredentialButton:active {
-  transform: scale(0.9) rotateZ(180deg) translateY(2px);
+  transform: scale(0.9);
 }
 
 .showHideButton {
@@ -37,11 +27,12 @@
   padding-top: 5px;
   padding-left: 5px;
   border: none;
+  transform: scale(1);
   transition: transform 0.2s;
 }
 
 .showHideButton:hover {
-  transform: scale(1.1);
+  transform: scale(1.2);
   cursor: pointer;
 }
 

packages/frontend/src/components/CredentialInput.tsx

@@ -125,17 +125,29 @@ const CredentialInput: React.FC<CredentialInputProps> = ({
           onClick={() => setCredential('')}
         >
           <svg
-            fill="currentColor"
-            version="1.1"
-            id="Capa_1"
+            fill="#ffffff"
             xmlns="http://www.w3.org/2000/svg"
-            width="26px"
-            height="26px"
-            viewBox="0 0 489.533 489.533"
+            width="24px"
+            height="24px"
+            viewBox="0 0 52 52"
+            enableBackground="new 0 0 52 52"
+            xmlSpace="preserve"
+            stroke="#ffffff"
           >
-            <g>
-              <path d="M244.767,0C109.767,0,0,109.767,0,244.767s109.767,244.767,244.767,244.767s244.767-109.767,244.767-244.767 S379.767,0,244.767,0z M244.767,448.533c-112.267,0-203.767-91.5-203.767-203.767S132.5,40.999,244.767,40.999 S448.533,132.5,448.533,244.767S357.033,448.533,244.767,448.533z" />
-              <path d="M244.767,122.5c-67.5,0-122.5,55-122.5,122.5h40.999c0-45.5,36-81.5,81.5-81.5s81.5,36,81.5,81.5 c0,45.5-36,81.5-81.5,81.5c-22.5,0-42.5-9-57.5-24l40.999-40.999h-122.5v122.5l40.999-40.999c22.5,22.5,53.5,36,87.5,36 c67.5,0,122.5-55,122.5-122.5S312.267,122.5,244.767,122.5z" />
+            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+            <g
+              id="SVGRepo_tracerCarrier"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            ></g>
+            <g id="SVGRepo_iconCarrier">
+              {' '}
+              <g>
+                {' '}
+                <path d="M42,23H10c-2.2,0-4,1.8-4,4v19c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V27C46,24.8,44.2,23,42,23z M31,44.5 c-1.5,1-3.2,1.5-5,1.5c-0.6,0-1.2-0.1-1.8-0.2c-2.4-0.5-4.4-1.8-5.7-3.8l3.3-2.2c0.7,1.1,1.9,1.9,3.2,2.1c1.3,0.3,2.6,0,3.8-0.8 c2.3-1.5,2.9-4.7,1.4-6.9c-0.7-1.1-1.9-1.9-3.2-2.1c-1.3-0.3-2.6,0-3.8,0.8c-0.3,0.2-0.5,0.4-0.7,0.6L26,37h-9v-9l2.6,2.6 c0.4-0.4,0.9-0.8,1.3-1.1c2-1.3,4.4-1.8,6.8-1.4c2.4,0.5,4.4,1.8,5.7,3.8C36.2,36.1,35.1,41.7,31,44.5z"></path>{' '}
+                <path d="M10,18.1v0.4C10,18.4,10,18.3,10,18.1C10,18.1,10,18.1,10,18.1z"></path>{' '}
+                <path d="M11,19h4c0.6,0,1-0.3,1-0.9V18c0-5.7,4.9-10.4,10.7-10C32,8.4,36,13,36,18.4v-0.3c0,0.6,0.4,0.9,1,0.9h4 c0.6,0,1-0.3,1-0.9V18c0-9.1-7.6-16.4-16.8-16c-8.5,0.4-15,7.6-15.2,16.1C10.1,18.6,10.5,19,11,19z"></path>{' '}
+              </g>{' '}
             </g>
           </svg>
         </button>

packages/frontend/src/components/ServiceInput.tsx

@@ -19,10 +19,6 @@ interface ServiceInputProps {
   canMoveDown: boolean;
 }
 
-function isEncrypted(value: string): boolean {
-  return value.match(/^E-[0-9a-fA-F]{32}-[0-9a-fA-F]+$/) !== null;
-}
-
 const ServiceInput: React.FC<ServiceInputProps> = ({
   serviceName,
   enabled,
@@ -132,12 +128,6 @@ const ServiceInput: React.FC<ServiceInputProps> = ({
                     </a>
                   </>
                 )}
-                {field.value && isEncrypted(field.value) && (
-                  <span className={styles.encrypted}>
-                    {'. '}Encrypted. To modify this, please reset the API key
-                    using the button to the right
-                  </span>
-                )}
               </label>
               <CredentialInput
                 credential={field.value}