refactor: Move input styles to App.css and replace button with Button component in ShareModal

Author: medyo

src/assets/App.css

@@ -1397,7 +1397,33 @@ Modal
 .modalCloseBtn:hover {
   opacity: 0.7;
 }
+.settingContent .form {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.settingContent input[type='text'] {
+  flex: 1;
+  background-color: var(--settings-input-background-color);
+  border: 1px solid var(--settings-input-border-color);
+  border-radius: 50px;
+  padding: 6px 18px;
+  color: var(--settings-input-text-color);
+  font-size: 14px;
+}
 
+.settingContent input[type='text']::placeholder {
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: var(--settings-input-placeholder-color);
+  opacity: 1;
+  font-size: 14px;
+}
+
+.settingContent input[type='text']:focus {
+  border-color: var(--settings-input-border-focus-color);
+}
 @media (max-width: 768px) {
   .Modal {
     left: 0;

src/features/settings/components/GeneralSettings/generalSettings.css

@@ -16,34 +16,6 @@
   border-bottom: 1px solid var(--card-content-divider);
 }
 
-.settingContent .form {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 12px;
-}
-
-.settingContent input[type='text'] {
-  flex: 1;
-  background-color: var(--settings-input-background-color);
-  border: 1px solid var(--settings-input-border-color);
-  border-radius: 50px;
-  padding: 6px 18px;
-  color: var(--settings-input-text-color);
-  font-size: 14px;
-}
-
-.settingContent input[type='text']::placeholder {
-  /* Chrome, Firefox, Opera, Safari 10.1+ */
-  color: var(--settings-input-placeholder-color);
-  opacity: 1;
-  font-size: 14px;
-}
-
-.settingContent input[type='text']:focus {
-  border-color: var(--settings-input-border-focus-color);
-}
-
 .settingContent button {
   display: flex;
   align-items: center;

src/features/shareModal/components/ShareModal.tsx

@@ -17,6 +17,7 @@ import {
   WhatsappShareButton,
 } from 'react-share'
 import toast from 'react-simple-toasts'
+import { Button } from 'src/components/Elements'
 import { twitterHandle } from 'src/config'
 import { trackLinkCopy, trackLinkShare } from 'src/lib/analytics'
 import { ShareModalData } from '../types'
@@ -118,9 +119,14 @@ export const ShareModal = ({ showModal, closeModal, shareData }: ShareModalProps
           <div className="settingContent">
             <div className="form">
               <input type="text" value={link} disabled />
-              <button aria-label="Copy url to clipboard" onClick={() => onCopyClicked()}>
-                <VscCopy /> Copy
-              </button>
+
+              <Button
+                aria-label="Copy url to clipboard"
+                startIcon={<VscCopy />}
+                onClick={onCopyClicked}
+                size="small">
+                Copy
+              </Button>
             </div>
           </div>
         </div>