DAO-673 fix: edited box shadow of icon of the modal to match design. (#…

…182)

* DAO-673 fix: edited box shadow of icon of the modal to match design.
fix: changed background color
fix: removed unused paragraph component from two components

* fix: proposal created metrics card adjusted width

src/app/proposals/page.tsx

@@ -25,7 +25,9 @@ export default function Proposals() {
           {/*<MetricsCard title="Votes" amount="-" />*/}
           {/* @TODO ask product/design what this is */}
           {/* <MetricsCard title="Total voting power delegated" amount="230" /> */}
-          <MetricsCard title="Proposals created" amount={latestProposals.length.toString()} />
+          <div className="w-52">
+            <MetricsCard title="Proposals created" amount={latestProposals.length.toString()} />
+          </div>
         </div>
         {/* <div className="grid grid-cols-2 gap-x-6">
           <DelegatedTable />

src/app/user/Communities/JoinACommunity.tsx

@@ -3,6 +3,7 @@ import { Button } from '@/components/Button'
 import { Header } from '@/components/Typography'
 import { LuUsers } from 'react-icons/lu'
 import { useRouter } from 'next/navigation'
+import { SHARED_MODAL_BOX_SHADOW_STYLE } from '@/lib/utils'
 
 export const JoinACommunity = () => {
   const router = useRouter()
@@ -11,7 +12,7 @@ export const JoinACommunity = () => {
       <div className="w-[506px] flex align-middle items-center flex-col">
         <div
           style={{
-            boxShadow: '0px 0px 16.4px 0px rgba(123,87,252,0.68)',
+            boxShadow: SHARED_MODAL_BOX_SHADOW_STYLE,
             padding: 17,
             borderRadius: '30%',
             backgroundColor: 'white',

src/app/user/Stake/StakePreview.tsx

@@ -1,9 +1,10 @@
-import { Span, Paragraph, Header } from '@/components/Typography'
+import { Span, Header } from '@/components/Typography'
 import { Button } from '@/components/Button'
 import { TbFileSearch } from 'react-icons/tb'
 import { StakePreviewBalance } from './StakePreviewBalance'
 import { StakePreviewBalanceProps } from '@/app/user/Stake/types'
 import { ReactNode } from 'react'
+import { SHARED_MODAL_BOX_SHADOW_STYLE } from '@/lib/utils'
 
 interface StakePreviewProps {
   from: Omit<StakePreviewBalanceProps, 'topLeftText'>
@@ -35,7 +36,7 @@ export const StakePreview = ({
       <div className="flex justify-center mt-[63px]">
         <div
           style={{
-            boxShadow: '0px 0px 16.4px 0px rgba(123,87,252,0.68)',
+            boxShadow: SHARED_MODAL_BOX_SHADOW_STYLE,
             padding: 17,
             borderRadius: '30%',
             backgroundColor: 'white',

src/app/user/Stake/StakeStatus.tsx

@@ -1,7 +1,7 @@
-import { Header, Label, Paragraph, Span } from '@/components/Typography'
+import { Header, Label, Span } from '@/components/Typography'
 import { Button } from '@/components/Button'
 import { LuBadgeCheck } from 'react-icons/lu'
-import { goToExplorerWithTxHash } from '@/lib/utils'
+import { goToExplorerWithTxHash, SHARED_MODAL_BOX_SHADOW_STYLE } from '@/lib/utils'
 import { useMemo } from 'react'
 import moment from 'moment'
 import { ActionBeingExecuted, textsDependingOnAction } from '@/app/user/Stake/Steps/stepsUtils'
@@ -31,7 +31,7 @@ export const StakeStatus = ({
       <div className="flex justify-center mt-[63px]">
         <div
           style={{
-            boxShadow: '0px 0px 16.4px 0px rgba(123,87,252,0.68)',
+            boxShadow: SHARED_MODAL_BOX_SHADOW_STYLE,
             padding: 17,
             borderRadius: '30%',
             backgroundColor: 'white',

src/components/Modal/VoteSubmittedModal.tsx

@@ -3,7 +3,7 @@ import { Modal } from '@/components/Modal/Modal'
 import { Header, Paragraph } from '@/components/Typography'
 import { FC } from 'react'
 import { LuBadgeCheck } from 'react-icons/lu'
-import { cn, truncateMiddle } from '@/lib/utils'
+import { cn, SHARED_MODAL_BOX_SHADOW_STYLE, truncateMiddle } from '@/lib/utils'
 
 export type Vote = 'for' | 'against' | 'abstain'
 
@@ -25,7 +25,7 @@ export const VoteSubmittedModal: FC<Props> = ({ onClose, proposal, vote }) => {
         <div className="flex justify-center mt-6">
           <div
             style={{
-              boxShadow: '0px 0px 16.4px 0px rgba(123,87,252,0.68)',
+              boxShadow: SHARED_MODAL_BOX_SHADOW_STYLE,
               padding: 17,
               borderRadius: '30%',
               backgroundColor: 'white',

src/lib/utils.ts

@@ -150,3 +150,5 @@ export const toFixed = (num: number | string, decimalPlaces = 8) => {
   }
   return n.toFixed(decimalPlaces).replace(/\.?0+$/, '')
 }
+
+export const SHARED_MODAL_BOX_SHADOW_STYLE = '0px 0px 16.4px 0px rgba(229,107,26,0.68)'

src/theme/default.css

@@ -8,7 +8,7 @@ html[data-theme='default'] {
   --color-primary: rgba(229, 107, 26, 1);
   --color-secondary: rgba(19, 194, 150, 1);
 
-  --background: #000;
+  --background: #1A1A1A;
   --foreground: rgba(37, 37, 37, 1);
 
   --text-primary: white;