fix so margin is not baked in

codecov · Oct 29, 2024 · 5e20b9e · 5e20b9e
1 parent 862004e
commit 5e20b9e
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/src/layouts/Header/components/Navigator/Navigator.tsx b/src/layouts/Header/components/Navigator/Navigator.tsx
@@ -29,7 +29,7 @@ function Navigator({ currentUser }: NavigatorProps) {
           <Breadcrumb paths={breadcrumbs} largeFont />{' '}
         </span>
         {isCurrentUserPartOfOrg === false ? (
-          <Label variant="plain" className="hidden sm:block">
+          <Label variant="plain" className="ml-2 hidden sm:block">
             Viewing as visitor
           </Label>
         ) : null}
@@ -63,7 +63,7 @@ function Navigator({ currentUser }: NavigatorProps) {
         <Avatar user={ownerData} />
         <h2 className="mx-2 text-xl font-semibold">{ownerData?.username}</h2>
         {isCurrentUserPartOfOrg === false ? (
-          <Label variant="plain" className="hidden sm:block">
+          <Label variant="plain" className="ml-2 hidden sm:block">
             Viewing as visitor
           </Label>
         ) : null}
@@ -86,7 +86,7 @@ function Navigator({ currentUser }: NavigatorProps) {
     <div className="flex items-center">
       <MyContextSwitcher pageName={pageName} />
       {isCurrentUserPartOfOrg === false ? (
-        <Label variant="plain" className="hidden sm:block">
+        <Label variant="plain" className="ml-2 hidden sm:block">
           Viewing as visitor
         </Label>
       ) : null}

diff --git a/src/shared/ListRepo/RepoTitleLink/RepoTitleLink.jsx b/src/shared/ListRepo/RepoTitleLink/RepoTitleLink.jsx
@@ -29,8 +29,16 @@ function RepoTitleLink({ repo, showRepoOwner, pageName, disabledLink }) {
             <span className="font-semibold">{repo.name}</span>
           </span>
         </div>
-        {isRepoPrivate && <Label variant="plain">Private</Label>}
-        {active && !activated && <Label variant="plain">Deactivated</Label>}
+        {isRepoPrivate && (
+          <Label variant="plain" className="ml-2">
+            Private
+          </Label>
+        )}
+        {active && !activated && (
+          <Label variant="plain" className="ml-2">
+            Deactivated
+          </Label>
+        )}
       </div>
     )
   }
@@ -52,9 +60,21 @@ function RepoTitleLink({ repo, showRepoOwner, pageName, disabledLink }) {
           <span className="font-semibold">{repo.name}</span>
         </span>
       </AppLink>
-      {isRepoPrivate && <Label variant="plain">Private</Label>}
-      {active && !activated && <Label variant="plain">Deactivated</Label>}
-      {repo?.isDemo && <Label variant="plain">System generated</Label>}
+      {isRepoPrivate && (
+        <Label variant="plain" className="ml-2">
+          Private
+        </Label>
+      )}
+      {active && !activated && (
+        <Label variant="plain" className="ml-2">
+          Deactivated
+        </Label>
+      )}
+      {repo?.isDemo && (
+        <Label variant="plain" className="ml-2">
+          System generated
+        </Label>
+      )}
     </div>
   )
 }

diff --git a/src/ui/Label/Label.tsx b/src/ui/Label/Label.tsx
@@ -10,7 +10,7 @@ const label = cva(
         default: 'border-current',
         subtle: 'border-ds-border-line text-ds-gray-senary bg-ds-gray-primary',
         plain:
-          'ml-2 py-0.5 border-ds-gray-tertiary text-ds-gray-senary dark:bg-ds-gray-tertiary dark:text-ds-secondary-text',
+          'py-0.5 border-ds-gray-tertiary text-ds-gray-senary dark:bg-ds-gray-tertiary dark:text-ds-secondary-text',
       },
     },
     defaultVariants: {