[WIP] design QA

components/chain-list/chain-item.tsx

@@ -126,4 +126,6 @@ export const WalletAddress = styled.div`
 export const ChainCheckBox = styled.input.attrs({ type: "checkbox" })`
   width: 1.5rem;
   height: 1.5rem;
+
+  accent-color: ${color.orange["200"]};
 `;

components/connect-wallet-modal/modal.tsx

@@ -19,7 +19,7 @@ export const ConnectWalletModal: FunctionComponent<Props> = (props) => {
       onRequestClose={onCloseModal}
       ariaHideApp={false}
       style={{
-        overlay: { background: "#181818b3" },
+        overlay: { background: "#121212cc" },
         content: {
           top: "50%",
           left: "50%",
@@ -52,6 +52,8 @@ const ModalContainer = styled.div`
   flex-direction: column;
   gap: 0.9rem;
   padding: 2.2rem;
+
+  min-width: 28rem;
 `;
 
 const ModalTitle = styled.div`

components/primary-button/index.ts

@@ -12,8 +12,10 @@ export const PrimaryButton = styled.button`
   font-family: "Inter", serif;
   font-style: normal;
   font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 20px;
+  font-size: 1.25rem;
+  line-height: 1.25rem;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
 
   color: ${color.orange["50"]};
   background-color: ${color.orange["100"]};

components/skeleton/skeleton-chain-list.tsx

@@ -115,9 +115,11 @@ export const SkeletonChainList: FunctionComponent = () => (
         <SkeletonDivider />
       </ChainContainer>
 
-      <ButtonContainer>
-        <SkeletonButton />
-      </ButtonContainer>
+      <SkeletonButtonContainer>
+        <ButtonContainer>
+          <SkeletonButton />
+        </ButtonContainer>
+      </SkeletonButtonContainer>
     </ContentContainer>
   </SkeletonContainer>
 );
@@ -132,10 +134,16 @@ const SkeletonTitle = styled.div`
   background-color: ${color.grey["700"]};
 `;
 
+const SkeletonButtonContainer = styled.div`
+  margin-top: 1.5rem;
+`;
+
 const SkeletonButton = styled.div`
   width: 12rem;
   height: 4rem;
 
+  padding-top: 1.5rem;
+
   background-color: ${color.grey["700"]};
 `;
 

components/twitter-profile/index.tsx

@@ -130,5 +130,10 @@ export const ProfileDescriptionContainer = styled.div`
   font-size: 0.8rem;
   line-height: 1rem;
 
+  max-width: 27.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
   color: ${color.grey["100"]};
 `;

pages/verification/index.tsx

@@ -439,8 +439,8 @@ export const ContentContainer = styled.div`
 `;
 
 export const ButtonContainer = styled.div<{ disabled?: boolean }>`
-  width: 12rem;
-  height: 4rem;
+  width: 11rem;
+  height: 3.5rem;
 
   background-color: ${(props) =>
     props.disabled ? color.orange["300"] : color.orange["100"]};
@@ -490,4 +490,6 @@ const AgreeContainer = styled.div`
 const AgreeCheckBox = styled.input.attrs({ type: "checkbox" })`
   width: 1.2rem;
   height: 1.2rem;
+
+  accent-color: ${color.orange["200"]};
 `;