b687d37 Unify button heights — radicle-explorer

modified public/index.css

@@ -74,12 +74,20 @@

 	--font-family-monospace: monospace;
 	--font-weight-medium: 600;
 	--font-weight-bold: 700;
 	--border-radius: 50px;
 	--border-radius-medium: 0.25rem;
 	--box-shadow-color: var(--color-secondary-2);
 	--content-max-width: 1920px;
 	--content-min-width: 480px;
 	--scrollbar-width: 0.5rem;
 	--button-regular-height: 2.5rem;
 	--button-small-height: 2rem;
 	--button-tiny-height: 1.5rem;
 }
 body {

@@ -165,15 +173,18 @@ button {

 	color: var(--color-foreground-6);
 	background: transparent;
 	font-size: 1rem;
 	padding: 1rem 1.5rem;
 	padding: 0rem 1.5rem;
 	border: 1px solid var(--color-foreground-6);
 	border-radius: var(--border-radius);
 	cursor: pointer;
 	min-width: 8rem;
 	display: inline-flex;
 	align-items: center;
 }
 button:not([disabled]):hover {
 	color: var(--color-background);
 	background-color: var(--color-foreground);
 	border-color: transparent;
 }
 button.waiting {
 	cursor: wait;

@@ -233,12 +244,13 @@ button.text:hover {

 	background-color: var(--color-foreground);
 }
 button.small {
 button.regular {
 	padding-top: 0.5rem;
 	padding-bottom: 0.5rem;
 	min-width: 6rem;
 	height: var(--button-regular-height);
 }
 button.tiny {
 button.small {
 	min-width: auto;
 	padding: 0 0.75rem;
 	height: 2rem;

@@ -280,8 +292,9 @@ input[type="text"] {

 	background: transparent;
 	border: 1px solid var(--color-secondary);
 	border-radius: var(--border-radius);
 	padding: 1rem 1.5rem;
 	padding: 0rem 1.5rem;
 	margin: 1rem;
 	height: var(--button-regular-height);
 }
 input[type="text"]::placeholder {
 	color: var(--color-secondary);

@@ -358,6 +371,7 @@ label.input {

 	margin: 0 0.5rem;
 	font-size: 0.75rem;
 	line-height: 1.6;
 	height: var(--button-tiny-height);
 }
 .badge.primary {
 	color: var(--color-primary);

modified src/Form.svelte

@@ -235,10 +235,10 @@

 </div>
 <div class="actions" class:editable>
   <button on:click={cancel} {disabled} class="small">
   <button on:click={cancel} {disabled} class="regular">
     Cancel
   </button>
   <button on:click={save} disabled={hasErrors || disabled} class="small primary">
   <button on:click={save} disabled={hasErrors || disabled} class="regular primary">
     Save
   </button>
 </div>

modified src/Header.svelte

@@ -41,10 +41,12 @@

     align-items: center;
     margin: 0;
     padding: 1.5rem;
 	height: 5.5rem;
   }
   header .left, header .right {
     display: flex;
     align-items: center;
 	height: var(--button-regular-height);
   }
   header .nav {
     display: inline-block;

@@ -70,6 +72,8 @@

   .logo {
     display: flex;
 	height: var(--button-regular-height);
 	align-items: center;
   }
   .error {
     text-align: center;

@@ -86,7 +90,7 @@

     text-decoration: none;
   }
   .search {
     height: 42px;
     height: var(--button-regular-height);
     width: 16rem;
     margin-left: 1.5rem;
     display: inline-block;

@@ -96,7 +100,6 @@

     flex-direction: row;
     align-items: center;
     justify-content: center;
     min-height: 42px;
     margin-left: 2rem;
     width: 10rem;
     padding-left: 0;

@@ -110,8 +113,11 @@

     color: var(--color-tertiary);
     background-color: var(--color-tertiary-background);
     line-height: 1.5em;
     padding: 0.5rem 1rem;
     padding: 0rem 1rem;
     border-radius: var(--border-radius);
 	height: var(--button-regular-height);
 	display: flex;
 	align-items: center;
   }
   .network.unavailable {
     color: #888;

@@ -196,7 +202,7 @@

         {/if}
       </span>
       <button class="address outline small"
       <button class="address outline regular"
         on:click={() => disconnectWallet(config)}
         on:mouseover={() => sessionButtonHover = true}
         on:focus={() => sessionButtonHover = true}

@@ -215,7 +221,7 @@

       </button>
     {:else if config}
       <span class="connect">
         <Connect className="small" {config} />
         <Connect className="regular" {config} />
       </span>
     {/if}
     <div class="toggle" on:click={toggleNavbar}>

modified src/Profile.svelte

@@ -244,7 +244,7 @@

         <div class="desktop">
           {#await account && profile.org.isMember(account, config) then isMember}
             {#if isOwner(profile.org) || isMember}
               <button class="tiny secondary" on:click={transferOwnership}>
               <button class="small secondary" on:click={transferOwnership}>
                 Transfer
               </button>
             {/if}

@@ -287,7 +287,7 @@

               <!-- Loading -->
             {:then authorized}
               {#if authorized}
                 <button class="tiny secondary" on:click={setName}>
                 <button class="small secondary" on:click={setName}>
                   Set
                 </button>
               {/if}

@@ -315,7 +315,7 @@

         </div>
         <div class="desktop">
           {#if isUserAuthorized(profile.address)}
             <button class="tiny secondary" on:click={setName}>
             <button class="small secondary" on:click={setName}>
               Set
             </button>
           {/if}

modified src/RadicleUrn.svelte

@@ -41,7 +41,7 @@

   </div>
 </div>
 <div>
   <button class="tiny faded" disabled={copied} on:click={copy()}>
   <button class="small faded" disabled={copied} on:click={copy()}>
     {#if copied}
       Copy ✓
     {:else}

modified src/Search.svelte

@@ -26,6 +26,7 @@

     margin: 0;
     padding:  0.5rem 1.25rem;
     border-style: dashed;
 	height: var(--button-regular-height);
   }
 </style>

modified src/SiweConnect.svelte

@@ -23,7 +23,7 @@

 </style>
 <button
   class="tiny secondary"
   class="small secondary"
   title={tooltip}
   disabled={disabled || (connection === Connection.Connecting)}
   on:click={async () => {

modified src/base/orgs/Create.svelte

@@ -183,14 +183,14 @@

       {#if state === State.Idle}
         <button
           on:click={createOrg}
           class="primary"
           class="primary regular"
           data-waiting={[State.Signing, State.Pending].includes(state) || null}
           disabled={state !== State.Idle}
         >
           Create
         </button>
         <button on:click={() => dispatch('close')} class="text">
         <button on:click={() => dispatch('close')} class="text regular">
           Close
         </button>
       {/if}

modified src/base/orgs/Index.svelte

@@ -66,7 +66,7 @@

     <div class="my-orgs">
       <header>
         <span>My <strong>Orgs</strong></span>
         <button class="create small secondary" on:click={onCreate} disabled={!account}>
         <button class="create regular secondary" on:click={onCreate} disabled={!account}>
           Create
         </button>
       </header>

modified src/base/orgs/TransferOwnership.svelte

@@ -84,7 +84,7 @@

     </div>
     <div slot="actions">
       <button class="small" on:click={() => dispatch('close')}>
       <button class="regular" on:click={() => dispatch('close')}>
         Done
       </button>
     </div>

@@ -102,7 +102,7 @@

     </div>
     <div slot="actions">
       <button class="small" on:click={() => dispatch('close')}>
       <button class="regular" on:click={() => dispatch('close')}>
         Done
       </button>
     </div>

@@ -144,15 +144,15 @@

     <div slot="actions">
       {#if state == State.Signing}
         <button class="small" on:click={() => dispatch('close')}>
         <button class="regular" on:click={() => dispatch('close')}>
           Cancel
         </button>
       {:else if state == State.Pending}
         <button class="small" on:click={() => dispatch('close')}>
         <button class="regular" on:click={() => dispatch('close')}>
           Close
         </button>
       {:else if state == State.Failed}
         <button class="small" on:click={resetForm}>
         <button class="regular" on:click={resetForm}>
           Back
         </button>
       {:else}

modified src/base/profiles/AnchorActions.svelte

@@ -124,7 +124,7 @@

   <button on:click|stopPropagation={() => {
     action = Action.Execute;
     state = State.Confirm;
   }} class="tiny execute">
   }} class="small execute">
     <Avatar inline source={account} title={account} /> Execute
   </button>
   <!-- Check whether or not we've signed this proposal -->

@@ -134,7 +134,7 @@

   <button on:click|stopPropagation={() => {
     action = Action.Sign;
     state = State.Confirm;
     }} class="tiny">
     }} class="small">
     Confirm
   </button>
 {/if}

modified src/base/projects/Browser.svelte

@@ -160,7 +160,7 @@

   <!-- Mobile navigation -->
   {#if tree.entries.length > 0}
     <nav class="mobile">
       <button class="small browse secondary center-content" on:click={toggleMobileFileTree}>
       <button class="regular browse secondary center-content" on:click={toggleMobileFileTree}>
         Browse
       </button>
     </nav>

modified src/base/registrations/Index.svelte

@@ -53,7 +53,7 @@

         />
       </span>
       <button disabled={!label} class="primary register" on:click={register}>
       <button disabled={!label} class="primary register regular" on:click={register}>
         Check
       </button>
     </div>

modified src/base/registrations/View.svelte

@@ -183,11 +183,11 @@

       <h1 class="bold">{domain}</h1>
       <button
         style="min-width: 60px;"
         class="tiny primary" class:active={editable} disabled={!isOwner(state.owner)}
         class="small primary" class:active={editable} disabled={!isOwner(state.owner)}
         on:click={() => editable = !editable}>
           Edit
       </button>
       <button class="tiny secondary" disabled>
       <button class="small secondary" disabled>
         Transfer
       </button>
     </header>

modified src/base/vesting/Index.svelte

@@ -79,20 +79,20 @@

         <span slot="actions">
           {#if isBeneficiary}
             {#if $state === State.WithdrawingSign}
               <button disabled data-waiting class="primary small">
               <button disabled data-waiting class="primary regular">
                 Waiting for signature...
               </button>
             {:else if $state === State.Withdrawing}
               <button disabled data-waiting class="primary small">
               <button disabled data-waiting class="primary regular">
                 Withdrawing...
               </button>
             {:else if $state === State.Idle}
               <button on:click={() => withdrawVested(contractAddress, config)} class="primary small">
               <button on:click={() => withdrawVested(contractAddress, config)} class="primary regular">
                 Withdraw
               </button>
             {/if}
           {/if}
           <button on:click={reset} class="small">
           <button on:click={reset} class="regular">
             Back
           </button>
         </span>

modified src/components/Modal/ConnectWallet.svelte

@@ -68,10 +68,10 @@

     </div>
     <div slot="actions">
       <button class="secondary tiny text-small" on:click={onClickConnect} disabled={!config.metamask.signer}>
       <button class="secondary small text-small" on:click={onClickConnect} disabled={!config.metamask.signer}>
         Connect with Metamask
       </button>
       <button class="text tiny text-small" on:click={onClose}>
       <button class="text small text-small" on:click={onClose}>
         Close
       </button>
     </div>

modified src/ens/DomainInput.svelte

@@ -18,14 +18,16 @@

 <style>
   span.root {
     margin: 1rem;
     margin-left: 0;
     margin-right: 0;
 	padding: 1rem 2rem;
     /* margin: 1rem; */
     /* margin-left: 0; */
     /* margin-right: 0; */
 	/* padding: 0.7rem 2rem; */
 	padding: .4rem 1rem;
     color: var(--color-secondary);
     border-radius: 0 var(--border-radius) var(--border-radius) 0;
     border: 1px solid var(--color-secondary);
     border-left: none;
 	height: var(--button-regular-height);
   }
   input {
     line-height: 1.5;

modified src/ens/SetName.svelte

@@ -86,7 +86,7 @@

     </div>
     <div slot="actions">
       <button class="small" on:click={() => dispatch('close')}>
       <button class="regular" on:click={() => dispatch('close')}>
         Done
       </button>
     </div>

@@ -104,7 +104,7 @@

     </div>
     <div slot="actions">
       <button class="small" on:click={() => dispatch('close')}>
       <button class="regular" on:click={() => dispatch('close')}>
         Done
       </button>
     </div>

@@ -162,11 +162,11 @@

     <div slot="actions">
       {#if state == State.Signing}
         <button class="small" on:click={() => dispatch('close')}>
         <button class="regular" on:click={() => dispatch('close')}>
           Cancel
         </button>
       {:else if state == State.Pending}
         <button class="small" on:click={() => dispatch('close')}>
         <button class="regular" on:click={() => dispatch('close')}>
           Close
         </button>
       {:else}