rewrite styles

packages/ui/react-ui/src/WalletListItem.tsx

@@ -15,9 +15,7 @@ export const WalletListItem: FC<WalletListItemProps> = ({ handleClick, tabIndex,
         <li>
             <Button onClick={handleClick} startIcon={<WalletIcon wallet={wallet} />} tabIndex={tabIndex}>
                 {wallet.adapter.name}
-                {wallet.readyState === WalletReadyState.Installed && (
-                    <span className="wallet-adapter-button-end-text">Detected</span>
-                )}
+                {wallet.readyState === WalletReadyState.Installed && <span>Detected</span>}
             </Button>
         </li>
     );

packages/ui/react-ui/src/WalletModal.tsx

@@ -205,27 +205,24 @@ export const WalletModal: FC<WalletModalProps> = ({ className = '', container =
                                 </div>
                                 {otherWallets.length ? (
                                     <>
-                                        <h2 className="wallet-adapter-modal-list-header">
-                                            Already have a wallet?
-                                            <button
-                                                className="wallet-adapter-modal-list-more"
-                                                onClick={handleCollapseClick}
-                                                tabIndex={0}
+                                        <button
+                                            className="wallet-adapter-modal-list-more"
+                                            onClick={handleCollapseClick}
+                                            tabIndex={0}
+                                        >
+                                            <span>{expanded ? 'Hide ' : 'Already have a wallet? View '}options</span>
+                                            <svg
+                                                width="13"
+                                                height="7"
+                                                viewBox="0 0 13 7"
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                className={`${
+                                                    expanded ? 'wallet-adapter-modal-list-more-icon-rotate' : ''
+                                                }`}
                                             >
-                                                <span>{expanded ? 'Hide ' : 'View '}options</span>
-                                                <svg
-                                                    width="13"
-                                                    height="7"
-                                                    viewBox="0 0 13 7"
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    className={`${
-                                                        expanded ? 'wallet-adapter-modal-list-more-icon-rotate' : ''
-                                                    }`}
-                                                >
-                                                    <path d="M0.71418 1.626L5.83323 6.26188C5.91574 6.33657 6.0181 6.39652 6.13327 6.43762C6.24844 6.47872 6.37371 6.5 6.50048 6.5C6.62725 6.5 6.75252 6.47872 6.8677 6.43762C6.98287 6.39652 7.08523 6.33657 7.16774 6.26188L12.2868 1.626C12.7753 1.1835 12.3703 0.5 11.6195 0.5H1.37997C0.629216 0.5 0.224175 1.1835 0.71418 1.626Z" />
-                                                </svg>
-                                            </button>
-                                        </h2>
+                                                <path d="M0.71418 1.626L5.83323 6.26188C5.91574 6.33657 6.0181 6.39652 6.13327 6.43762C6.24844 6.47872 6.37371 6.5 6.50048 6.5C6.62725 6.5 6.75252 6.47872 6.8677 6.43762C6.98287 6.39652 7.08523 6.33657 7.16774 6.26188L12.2868 1.626C12.7753 1.1835 12.3703 0.5 11.6195 0.5H1.37997C0.629216 0.5 0.224175 1.1835 0.71418 1.626Z" />
+                                            </svg>
+                                        </button>
                                         <Collapse expanded={expanded} id="wallet-adapter-modal-collapse">
                                             <ul className="wallet-adapter-modal-list">
                                                 {otherWallets.map((wallet) => (

packages/ui/react-ui/styles.css

@@ -1,9 +1,123 @@
 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
 
-.wallet-adapter-modal * {
+.wallet-adapter-button {
+    background-color: transparent;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    height: 48px;
+    line-height: 48px;
+    padding: 0 24px;
+    border-radius: 4px;
+}
+
+.wallet-adapter-button-trigger {
+    background-color: #512da8;
+}
+
+.wallet-adapter-button:not([disabled]):focus-visible {
+    outline-color: white;
+}
+
+.wallet-adapter-button:not([disabled]):hover {
+    background-color: #1a1f2e;
+}
+
+.wallet-adapter-button[disabled] {
+    background: #404144;
+    color: #999;
+    cursor: not-allowed;
+}
+
+.wallet-adapter-button-end-icon,
+.wallet-adapter-button-start-icon,
+.wallet-adapter-button-end-icon img,
+.wallet-adapter-button-start-icon img {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+}
+
+.wallet-adapter-button-end-icon {
+    margin-left: 12px;
+}
+
+.wallet-adapter-button-start-icon {
+    margin-right: 12px;
+}
+
+.wallet-adapter-collapse {
+    width: 100%;
+}
+
+.wallet-adapter-dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.wallet-adapter-dropdown-list {
+    position: absolute;
+    z-index: 99;
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-row-gap: 10px;
+    padding: 10px;
+    top: 100%;
+    right: 0;
     margin: 0;
-    padding: 0;
+    list-style: none;
+    background: #2c2d30;
+    border-radius: 10px;
+    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
+}
+
+.wallet-adapter-dropdown-list-active {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(10px);
+}
+
+.wallet-adapter-dropdown-list-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    white-space: nowrap;
     box-sizing: border-box;
+    padding: 0 20px;
+    width: 100%;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    height: 37px;
+    color: #fff;
+}
+
+.wallet-adapter-dropdown-list-item:not([disabled]):hover {
+    background-color: #1a1f2e;
+}
+
+.wallet-adapter-modal-collapse-button svg {
+    align-self: center;
+    fill: #999;
+}
+
+.wallet-adapter-modal-collapse-button.wallet-adapter-modal-collapse-button-active svg {
+    transform: rotate(180deg);
+    transition: transform ease-in 150ms;
 }
 
 .wallet-adapter-modal {
@@ -14,7 +128,7 @@
     bottom: 0;
     opacity: 0;
     transition: opacity linear 150ms;
-    background: rgba(0, 0, 0, 0);
+    background: rgba(0, 0, 0, 0.5);
     z-index: 1040;
     overflow-y: auto;
 }
@@ -23,19 +137,51 @@
     opacity: 1;
 }
 
-.wallet-adapter-modal-button-icon-fill {
-    fill: rgba(255, 255, 255, 1);
+.wallet-adapter-modal-button-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 18px;
+    right: 18px;
+    padding: 12px;
+    cursor: pointer;
+    background: #1a1f2e;
+    border: none;
+    border-radius: 50%;
+}
+
+.wallet-adapter-modal-button-close:focus-visible {
+    outline-color: white;
+}
+
+.wallet-adapter-modal-button-close svg {
+    fill: #777;
+    transition: fill 200ms ease 0s;
+}
+
+.wallet-adapter-modal-button-close:hover svg {
+    fill: #fff;
+}
+
+.wallet-adapter-modal-overlay {
+    background: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
 }
 
 .wallet-adapter-modal-container {
     display: flex;
-    margin: 1rem;
-    min-height: calc(100vh - 2rem); /* 100vh - 2 * margin */
+    margin: 3rem;
+    min-height: calc(100vh - 6rem); /* 100vh - 2 * margin */
     align-items: center;
     justify-content: center;
 }
 
-@media (max-width: 30em) {
+@media (max-width: 480px) {
     .wallet-adapter-modal-container {
         margin: 1rem;
         min-height: calc(100vh - 2rem); /* 100vh - 2 * margin */
@@ -43,155 +189,75 @@
 }
 
 .wallet-adapter-modal-wrapper {
-    height: auto;
     box-sizing: border-box;
     position: relative;
     display: flex;
     align-items: center;
     flex-direction: column;
     z-index: 1050;
-    max-width: 24rem;
-    width: 100%;
-    border-radius: 0.5rem;
+    max-width: 400px;
+    border-radius: 10px;
     background: #10141f;
+    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
     font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    font-weight: 500;
     flex: 1;
-    padding: 0;
-    transition: height .5s ease;
 }
 
-.wallet-adapter-modal-button-close {
-    position: absolute;
-    right: 1rem;
-    top: 1rem;
-    display: flex;
-    height: 2rem;
-    width: 2rem;
-    border-radius: 50%;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    background-color: rgba(255, 255, 255, 0.05);
-    border: none;
-    font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-.wallet-adapter-modal-button-close svg {
-    fill: rgba(255, 255, 255, 0.7);
-}
-
-.wallet-adapter-modal-button-close:focus-visible {
-    outline-color: white;
-}
-
-.wallet-adapter-modal-button-close:hover > svg {
-    fill: rgba(255, 255, 255, 1);
-    transition: fill 0.1s ease;
+.wallet-adapter-modal-wrapper .wallet-adapter-button {
+    width: 100%;
 }
 
 .wallet-adapter-modal-title {
-    font-size: 1.75rem;
-    line-height: 2.1rem;
-    color: #fff;
-    margin: 3.5rem 0 0 0;
-    font-weight: 700;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 36px;
+    margin: 0;
+    padding: 64px 48px 48px 48px;
     text-align: center;
-    padding: 0 2rem;
+    color: #fff;
 }
 
-@media (max-width: 26.875em) {
+@media (max-width: 374px) {
     .wallet-adapter-modal-title {
-        padding: 0 1rem;
+        font-size: 18px;
     }
 }
 
-.wallet-adapter-modal-list-header {
-    margin: 3.5rem 0rem 0rem 1.6875rem;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    font-weight: 500;
-    align-self: flex-start;
-}
-
 .wallet-adapter-modal-list {
-    margin: 3rem 0 0 0;
-    padding: 0.125rem;
-    list-style: none;
-    width: 100%;
-    max-height: 16rem;
-    overflow-y: auto;
-}
-
-.wallet-adapter-modal-list::-webkit-scrollbar-track {
-    border-radius: 0.375rem;
-}
-.wallet-adapter-modal-list::-webkit-scrollbar {
-    width: 0.625rem;
-    border-radius: 0.375rem;
-    background-color: #343947;
-}
-.wallet-adapter-modal-list::-webkit-scrollbar-thumb {
-    border-radius: 0.375rem;
-    background-color: #e1e2e3;
-}
-
-.wallet-adapter-button {
+    margin: 0 0 12px 0;
+    padding: 0;
     width: 100%;
-    display: flex;
-    align-items: center;
-    height: 3.5rem;
-    padding: 0 2rem 0 1rem;
-    background-color: transparent;
-    font-size: 1.25rem;
-    line-height: 1.5rem;
-    border: none;
-    color: rgba(255, 255, 255, 0.9);
-    cursor: pointer;
-    text-align: left;
-    justify-content: flex-start;
-}
-
-.wallet-adapter-button:hover,
-.wallet-adapter-button:focus {
-    background-color: #1a1f2e;
-}
-
-.wallet-adapter-button-start-icon {
-    height: 2rem;
-    width: 2rem;
-    border-radius: 50%;
-    margin-right: 0.75rem;
+    list-style: none;
 }
 
-.wallet-adapter-button-start-icon img {
-    height: 2rem;
-    width: 2rem;
-    object-fit: contain;
+.wallet-adapter-modal-list .wallet-adapter-button {
+    font-weight: 400;
+    border-radius: 0;
+    font-size: 18px;
 }
 
-.wallet-adapter-button-end-text {
-    margin-left: auto;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    color: #5c6c7f;
-    font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+.wallet-adapter-modal-list .wallet-adapter-button-end-icon,
+.wallet-adapter-modal-list .wallet-adapter-button-start-icon,
+.wallet-adapter-modal-list .wallet-adapter-button-end-icon img,
+.wallet-adapter-modal-list .wallet-adapter-button-start-icon img {
+    width: 28px;
+    height: 28px;
 }
 
-.wallet-adapter-button-end-icon {
+.wallet-adapter-modal-list .wallet-adapter-button span {
     margin-left: auto;
+    font-size: 14px;
+    opacity: .6;
 }
 
 .wallet-adapter-modal-list-more {
-    align-self: flex-start;
+    cursor: pointer;
+    border: none;
+    padding: 12px 24px 24px 12px;
+    align-self: flex-end;
     display: flex;
     align-items: center;
-    padding: 0.75rem 1rem;
     background-color: transparent;
-    font-size: 1.125rem;
-    line-height: 1.5rem;
-    cursor: pointer;
-    border: none;
 }
 
 .wallet-adapter-modal-list-more svg {
@@ -204,169 +270,22 @@
     transform: rotate(180deg);
 }
 
-.wallet-adapter-modal-bottom {
-    margin-top: auto;
-    border-radius: 1.5rem 1.5rem 0.5rem 0.5rem;
-    box-sizing: border-box;
-    border: none;
-    background-image: url('https://images.toruswallet.io/solana_glass.png');
-    background-size: cover;
-    padding: 2rem;
-}
-
-.wallet-adapter-modal-bottom-title {
-    margin: 0;
-    color: #fff;
-    font-size: 1.25rem;
-    line-height: 1.625rem;
-    font-weight: 700;
-}
-
-.wallet-adapter-modal-bottom-info {
-    font-size: 1rem;
-    line-height: 1.375rem;
-    color: rgba(255, 255, 255, 0.9);
-    font-weight: 400;
-    margin-top: 0.5rem;
-}
-
-.wallet-adapter-modal-bottom-button {
-    border: none;
-    width: 100%;
-    font-size: 1.125rem;
-    font-weight: 700;
-    padding: 0.625rem 1.25rem;
-    border-radius: 0.5rem;
-    color: rgba(16, 20, 31, 0.9);
-    text-align: center;
-    background-color: rgba(255, 255, 255, 1);
-    box-shadow: 0 0 1.5rem rgba(26, 26, 26, 0.12);
-    margin-top: 1.25rem;
-    font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    cursor: pointer;
-}
-
-.wallet-adapter-modal-bottom-button:hover {
-    background-color: rgba(255, 255, 255, 0.8);
-}
-
 .wallet-adapter-modal-middle {
-    margin-top: 3.375rem;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding: 0 24px 24px 24px;
 }
 
 .wallet-adapter-modal-middle-button {
-    border: none;
-    width: 90%;
-    font-size: 1rem;
-    line-height: 1.2rem;
-    font-weight: 500;
-    padding: 0.75rem 1.25rem;
-    border-radius: 0.375rem;
-    color: rgba(255, 255, 255, 1);
-    text-align: center;
-    background-color: rgba(103, 65, 255, 1);
-    box-shadow: 0 0 1.5rem rgba(26, 26, 26, 0.12);
-    margin-top: 2.025rem;
-    font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    display: block;
     cursor: pointer;
-}
-
-.wallet-adapter-modal-middle-button:hover {
-    background-color: rgba(103,65,255,0.8);
-}
-
-.wallet-adapter-modal-overlay {
-    background: rgba(0, 0, 0, 0);
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-}
-
-
-.wallet-adapter-button-trigger {
-    background-color: #4e44ce;
-}
-
-.wallet-adapter-button:not([disabled]):focus-visible {
-    outline-color: white;
-}
-
-.wallet-adapter-button[disabled] {
-    background: #404144;
-    color: #999;
-    cursor: not-allowed;
-}
-
-.wallet-adapter-collapse {
+    margin-top: 48px;
     width: 100%;
-}
-
-.wallet-adapter-dropdown {
-    position: relative;
-    display: inline-block;
-}
-
-.wallet-adapter-dropdown-list {
-    position: absolute;
-    z-index: 99;
-    display: grid;
-    grid-template-rows: 1fr;
-    grid-row-gap: 0.625rem;
-    padding: 0.625rem;
-    top: 100%;
-    right: 0;
-    margin: 0;
-    list-style: none;
-    background: #2c2d30;
-    border-radius: 0.625rem;
-    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.6);
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
-}
-
-.wallet-adapter-dropdown-list-active {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0.625rem);
-}
-
-.wallet-adapter-dropdown-list-item {
-    background: #404144;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
+    background-color: #512da8;
+    padding: 12px;
+    font-size: 18px;
     border: none;
-    outline: none;
-    cursor: pointer;
-    white-space: nowrap;
-    box-sizing: border-box;
-    padding: 0 1.25rem;
-    width: 100%;
-    border-radius: 0.375rem;
-    font-size: 0.875rem;
-    font-weight: 600;
-    height: 2.3125rem;
-    color: white;
-}
-
-.wallet-adapter-dropdown-list-item:not([disabled]):hover {
-    background-image: linear-gradient(rgba(0, 0, 0, 0.15) 0 0);
-}
-
-.wallet-adapter-modal-collapse-button svg {
-    align-self: center;
-    fill: #999;
-}
-
-.wallet-adapter-modal-collapse-button.wallet-adapter-modal-collapse-button-active svg {
-    transform: rotate(180deg);
-    transition: transform ease-in 150ms;
+    border-radius: 8px;
 }