Badge design (#12390)

sourcegraph · Jul 30, 2020 · fa4ea54 · fa4ea54
1 parent 70b6f64
commit fa4ea54
Show file tree

Hide file tree

Showing 25 changed files with 287 additions and 154 deletions.
diff --git a/web/src/SourcegraphWebApp.scss b/web/src/SourcegraphWebApp.scss
@@ -62,6 +62,13 @@ $alert-color-level-light: 6;
 $alert-padding-y: 0.75rem;
 $alert-padding-x: 0.75rem;
 
+// Badges
+
+$badge-font-size: 0.75em;
+$badge-font-weight: 600;
+$badge-padding-y: 0.34em;
+$badge-padding-x: 0.6em;
+
 // Forms
 
 $form-check-input-margin-y: 0.2em;

diff --git a/web/src/components/diff/FileDiffNode.story.tsx b/web/src/components/diff/FileDiffNode.story.tsx
@@ -158,6 +158,29 @@ export const FILE_DIFF_NODES: IFileDiff[] = [
         newPath: 'to.md',
         oldPath: 'from.md',
     },
+    {
+        __typename: 'FileDiff',
+        hunks: DEMO_HUNKS,
+        internalID: 'abcdef123',
+        stat: { __typename: 'DiffStat', added: 0, changed: 1, deleted: 0 },
+        oldFile: {
+            __typename: 'VirtualFile',
+            binary: false,
+            name: 'dir1/from.md',
+        } as IVirtualFile,
+        newFile: {
+            __typename: 'VirtualFile',
+            binary: false,
+            name: 'dir2/to.md',
+        } as IVirtualFile,
+        mostRelevantFile: {
+            __typename: 'VirtualFile',
+            binary: false,
+            name: 'dir2/to.md',
+        } as IVirtualFile,
+        newPath: 'dir2/to.md',
+        oldPath: 'dir1/from.md',
+    },
     {
         __typename: 'FileDiff',
         hunks: [],

diff --git a/web/src/components/diff/FileDiffNode.tsx b/web/src/components/diff/FileDiffNode.tsx
@@ -14,6 +14,7 @@ import { ThemeProps } from '../../../../shared/src/theme'
 import { ExtensionsControllerProps } from '../../../../shared/src/extensions/controller'
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon'
 import classNames from 'classnames'
+import { dirname } from '../../util/path'
 
 export interface FileDiffNodeProps extends ThemeProps {
     node: GQL.IFileDiff
@@ -97,10 +98,12 @@ export class FileDiffNode extends React.PureComponent<FileDiffNodeProps, State>
                             )}
                         </button>
                         <div className="file-diff-node__header-path-stat align-items-baseline">
-                            {!node.oldPath && <span className="badge badge-success mr-2">Added file</span>}
-                            {!node.newPath && <span className="badge badge-danger mr-2">Deleted file</span>}
+                            {!node.oldPath && <span className="badge badge-success text-uppercase mr-2">Added</span>}
+                            {!node.newPath && <span className="badge badge-danger text-uppercase mr-2">Deleted</span>}
                             {node.newPath && node.oldPath && node.newPath !== node.oldPath && (
-                                <span className="badge badge-merged mr-2">Moved file</span>
+                                <span className="badge badge-warning text-uppercase mr-2">
+                                    {dirname(node.newPath) !== dirname(node.oldPath) ? 'Moved' : 'Renamed'}
+                                </span>
                             )}
                             {stat}
                             <Link to={{ ...this.props.location, hash: anchor }} className="file-diff-node__header-path">

diff --git a/web/src/enterprise/campaigns/detail/CampaignActionsBar.tsx b/web/src/enterprise/campaigns/detail/CampaignActionsBar.tsx
@@ -32,13 +32,13 @@ export const CampaignActionsBar: React.FunctionComponent<Props> = ({ campaign })
             </div>
             <div className="d-flex mb-2 position-relative">
                 <div>
-                    <h1 className="m-0">{campaign.name}</h1>
-                    <h2 className="m-0">
+                    <h1 className="mb-1">{campaign.name}</h1>
+                    <div>
                         <CampaignStateBadge isClosed={campaignClosed} />
                         <small className="text-muted">
                             {0}% complete. {campaign.changesets.totalCount} changesets total
                         </small>
-                    </h2>
+                    </div>
                 </div>
             </div>
         </>
@@ -48,13 +48,13 @@ export const CampaignActionsBar: React.FunctionComponent<Props> = ({ campaign })
 const CampaignStateBadge: React.FunctionComponent<{ isClosed: boolean }> = ({ isClosed }) => {
     if (isClosed) {
         return (
-            <span className="badge badge-danger mr-2">
+            <span className="badge badge-danger text-uppercase mr-2">
                 <CampaignsIcon className="icon-inline campaign-actions-bar__campaign-icon" /> Closed
             </span>
         )
     }
     return (
-        <span className="badge badge-success mr-2">
+        <span className="badge badge-success text-uppercase mr-2">
             <CampaignsIcon className="icon-inline campaign-actions-bar__campaign-icon" /> Open
         </span>
     )

diff --git a/web/src/enterprise/campaigns/detail/CampaignHeader.tsx b/web/src/enterprise/campaigns/detail/CampaignHeader.tsx
@@ -14,9 +14,7 @@ export const CampaignHeader: React.FunctionComponent<Props> = ({ className }) =>
         <CampaignsIcon className="icon-inline mr-2" />
         Campaigns
         <sup>
-            <small>
-                <span className="ml-2 badge badge-primary">BETA</span>
-            </small>
+            <span className="ml-2 badge badge-primary text-uppercase">Beta</span>
         </sup>
     </h1>
 )
diff --git a/web/src/enterprise/campaigns/detail/__snapshots__/CampaignDetails.test.tsx.snap b/web/src/enterprise/campaigns/detail/__snapshots__/CampaignDetails.test.tsx.snap
@@ -158,18 +158,16 @@ exports[`CampaignDetails viewerCanAdminister: false viewing existing 1`] = `
     >
       <div>
         <h1
-          className="m-0"
+          className="mb-1"
         >
           n
         </h1>
-        <h2
-          className="m-0"
-        >
+        <div>
           <CampaignStateBadge
             isClosed={false}
           >
             <span
-              className="badge badge-success mr-2"
+              className="badge badge-success text-uppercase mr-2"
             >
               <CampaignsIcon
                 className="icon-inline campaign-actions-bar__campaign-icon"
@@ -185,7 +183,7 @@ exports[`CampaignDetails viewerCanAdminister: false viewing existing 1`] = `
             2
              changesets total
           </small>
-        </h2>
+        </div>
       </div>
     </div>
   </CampaignActionsBar>
@@ -397,18 +395,16 @@ exports[`CampaignDetails viewerCanAdminister: true viewing existing 1`] = `
     >
       <div>
         <h1
-          className="m-0"
+          className="mb-1"
         >
           n
         </h1>
-        <h2
-          className="m-0"
-        >
+        <div>
           <CampaignStateBadge
             isClosed={false}
           >
             <span
-              className="badge badge-success mr-2"
+              className="badge badge-success text-uppercase mr-2"
             >
               <CampaignsIcon
                 className="icon-inline campaign-actions-bar__campaign-icon"
@@ -424,7 +420,7 @@ exports[`CampaignDetails viewerCanAdminister: true viewing existing 1`] = `
             2
              changesets total
           </small>
-        </h2>
+        </div>
       </div>
     </div>
   </CampaignActionsBar>

diff --git a/web/src/enterprise/campaigns/global/create/CampaignCliHelp.tsx b/web/src/enterprise/campaigns/global/create/CampaignCliHelp.tsx
@@ -40,7 +40,10 @@ interface Props {
 export const CampaignCliHelp: React.FunctionComponent<Props> = ({ className }) => (
     <div className={className}>
         <h1>
-            Create a campaign <span className="badge badge-info">Beta</span>
+            Create a campaign{' '}
+            <sup>
+                <span className="badge badge-info text-uppercase">Beta</span>
+            </sup>
         </h1>
         <div className="card">
             <div className="card-body p-3">

diff --git a/web/src/enterprise/campaigns/global/create/CreateCampaign.tsx b/web/src/enterprise/campaigns/global/create/CreateCampaign.tsx
@@ -12,7 +12,10 @@ interface Props {
 export const CreateCampaign: React.FunctionComponent<Props> = ({ className }) => (
     <div className={className}>
         <h1>
-            Create a new campaign <span className="badge badge-info">Beta</span>
+            Create a new campaign{' '}
+            <sup>
+                <span className="badge badge-info text-uppercase">Beta</span>
+            </sup>
         </h1>
         <ul className="list-group">
             <li className="list-group-item p-3">

diff --git a/web/src/enterprise/campaigns/global/create/__snapshots__/CampaignCliHelp.test.tsx.snap b/web/src/enterprise/campaigns/global/create/__snapshots__/CampaignCliHelp.test.tsx.snap
@@ -8,12 +8,15 @@ exports[`CampaignCliHelp renders 1`] = `
     className="test"
   >
     <h1>
-      Create a campaign 
-      <span
-        className="badge badge-info"
-      >
-        Beta
-      </span>
+      Create a campaign
+       
+      <sup>
+        <span
+          className="badge badge-info text-uppercase"
+        >
+          Beta
+        </span>
+      </sup>
     </h1>
     <div
       className="card"

diff --git a/web/src/enterprise/campaigns/global/create/__snapshots__/CreateCampaign.test.tsx.snap b/web/src/enterprise/campaigns/global/create/__snapshots__/CreateCampaign.test.tsx.snap
@@ -4,12 +4,15 @@ exports[`CreateCampaign renders 1`] = `
 <CreateCampaign>
   <div>
     <h1>
-      Create a new campaign 
-      <span
-        className="badge badge-info"
-      >
-        Beta
-      </span>
+      Create a new campaign
+       
+      <sup>
+        <span
+          className="badge badge-info text-uppercase"
+        >
+          Beta
+        </span>
+      </sup>
     </h1>
     <ul
       className="list-group"

diff --git a/web/src/enterprise/campaigns/global/list/GlobalCampaignListPage.tsx b/web/src/enterprise/campaigns/global/list/GlobalCampaignListPage.tsx
@@ -45,7 +45,10 @@ export const GlobalCampaignListPage: React.FunctionComponent<Props> = ({
             <div className="d-flex justify-content-between align-items-end mb-3">
                 <div>
                     <h1 className="mb-2">
-                        Campaigns <span className="badge badge-info">Beta</span>
+                        Campaigns{' '}
+                        <sup>
+                            <span className="badge badge-info text-uppercase">Beta</span>
+                        </sup>
                     </h1>
                     <p className="mb-0">
                         Perform and track large-scale code changes.{' '}
@@ -56,9 +59,7 @@ export const GlobalCampaignListPage: React.FunctionComponent<Props> = ({
 
             <div className="card mt-4 mb-4">
                 <div className="card-body p-3">
-                    <h3>
-                        Welcome to campaigns <span className="badge badge-info">Beta</span>!
-                    </h3>
+                    <h3>Welcome to campaigns!</h3>
                     <p className="mb-1">
                         We're excited for you to use campaigns to remove legacy code, fix critical security issues, pay
                         down tech debt, and more. We look forward to hearing about campaigns you run inside your