3bfb79d Improve orgs list page and other UI elements — radicle-explorer

modified public/index.css

@@ -338,9 +338,12 @@ label.input {

 	align-items: center;
 }
 span.small, .text-small {
 span.small, .text-xsmall {
 	font-size: 0.75rem;
 }
 .text-small {
 	font-size: 0.875rem;
 }
 button.error:hover {
 	background-color: var(--color-negative);

modified src/Header.svelte

@@ -70,7 +70,7 @@

     justify-content: center;
     min-height: 42px;
     margin-left: 2rem;
     width: 10.25rem;
     width: 9.25rem;
   }
   .connect {
     display: inline-block;

modified src/base/orgs/List.svelte

@@ -4,6 +4,7 @@

   import Avatar from '@app/Avatar.svelte';
   import { Profile } from '@app/profile';
   import type { Config } from '@app/config';
   import { formatName, formatAddress } from '@app/utils';
   import Loading from '@app/Loading.svelte';
   export let config: Config;

@@ -14,15 +15,38 @@

 <style>
   .org {
     width: 7rem;
     height: 7rem;
     margin-left: 3rem;
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
     display: inline-block;
     text-align: center;
   }
   .org:hover .org-label {
     color: var(--color-background);
     background: var(--color-secondary);
   }
   .org-avatar {
     margin: 0 auto;
     text-align: center;
     width: 3rem;
     height: 3rem;
     margin: 3rem;
   }
   .org-label {
     color: var(--color-foreground-90);
     display: inline-block;
     margin-top: 0.75rem;
     border-radius: 0.75rem;
     padding: 0.25rem 0.5rem;
     text-overflow: ellipsis;
     overflow-x: hidden;
     max-width: 7rem;
   }
   .list {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     flex-wrap: wrap;
   }
   .loading {
     padding: 3rem 0;

@@ -31,14 +55,23 @@

 {#await Profile.getMulti(orgsAddresses, config)}
   <div class="loading">
     <Loading center />
     <Loading center />
   </div>
 {:then profiles}
   <div class="list">
     {#each profiles as profile}
       <div class="org">
         <Link to={`/orgs/${profile.address}`}>
           <Avatar glowOnHover source={profile.avatar ?? profile.address} />
           <div class="org-avatar">
             <Avatar source={profile.avatar ?? profile.address} />
           </div>
           <div class="org-label">
             {#if profile.name}
               {formatName(profile.name, config)}
             {:else}
               {formatAddress(profile.address)}
             {/if}
           </div>
         </Link>
       </div>
     {:else}

modified src/base/orgs/View.svelte

@@ -2,7 +2,7 @@

   import type { SvelteComponent } from 'svelte';
   import Link from '@app/Link.svelte';
   import type { Config } from '@app/config';
   import { parseEnsLabel, explorerLink } from '@app/utils';
   import { formatName, parseEnsLabel, explorerLink } from '@app/utils';
   import { session } from '@app/session';
   import Loading from '@app/Loading.svelte';
   import Modal from '@app/Modal.svelte';

@@ -143,7 +143,7 @@

           <div class="info">
             <span class="title">
               <span class="bold">
                 {parseEnsLabel(profile.name, config) ?? address}
                 {profile.name ? formatName(profile.name, config) : address}
               </span>
               {#if profile.name && profile.address === org.owner}
                 <span class="badge">org</span>

modified src/base/projects/Browser.svelte

@@ -245,10 +245,10 @@

     </div>
   {:catch err}
     <div class="container center-content">
       <div class="error error-message text-small">
       <div class="error error-message text-xsmall">
         <!-- TODO: Differentiate between (1) commit doesn't exist and (2) failed
              to fetch - this needs a change to the backend. -->
         API request to <code class="text-small">{err.url}</code> failed
         API request to <code class="text-xsmall">{err.url}</code> failed
       </div>
     </div>
   {/await}

modified src/utils.ts

@@ -44,7 +44,7 @@ export function formatCAIP10Address(address: string, protocol: string, impl: num

 }
 export function formatAddress(addr: string): string {
   return formatHash(ethers.utils.getAddress(addr));
   return formatHash(ethers.utils.getAddress(addr)).replace(/^0x/, "");
 }
 export function formatIpfsFile(ipfs: string | undefined): string | undefined {

@@ -170,6 +170,12 @@ export async function querySubgraph(

   return json.data;
 }
 // Format a name.
 export function formatName(input: string, config: Config): string {
   const name = parseEnsLabel(input, config);
   return name || input;
 }
 // Create a Radicle ID from a root hash.
 export function formatRadicleId(hash: Uint8Array): string {
   // Remove any zero-padding from the byte array. SHA1 is 20 bytes long.