clean up and match styles on buttons

Author: jasonhawkharris

client/web/src/repo/RepoHeader.tsx

@@ -29,7 +29,7 @@ class RepoHeaderContributionStore {
     constructor(
         /** The common ancestor component's setState method. */
         private setState: (callback: (previousState: RepoHeaderContribution[]) => RepoHeaderContribution[]) => void
-    ) { }
+    ) {}
 
     private onRepoHeaderContributionAdd(item: RepoHeaderContribution): void {
         if (!item.children || typeof item.children !== 'function') {
@@ -115,7 +115,7 @@ export interface RepoHeaderContext {
     actionType: 'nav' | 'dropdown'
 }
 
-export interface RepoHeaderActionButton extends ActionButtonDescriptor<RepoHeaderContext> { }
+export interface RepoHeaderActionButton extends ActionButtonDescriptor<RepoHeaderContext> {}
 
 interface Props extends PlatformContextProps, TelemetryProps, BreadcrumbsProps {
     /**
@@ -168,10 +168,6 @@ export const RepoHeader: React.FunctionComponent<React.PropsWithChildren<Props>>
         onLifecyclePropsChange(repoHeaderContributionStore.props)
     }, [onLifecyclePropsChange, repoHeaderContributionStore.props])
 
-    // useEffect(() => {
-    //     console.log(props.breadcrumbs)
-    // }, [])
-
     const context: Omit<RepoHeaderContext, 'actionType'> = useMemo(
         () => ({
             repoName: props.repoName,

client/web/src/repo/RepoRevisionSidebar.module.scss

@@ -15,8 +15,6 @@
     height: 2rem;
     z-index: 1;
     isolation: isolate;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
     color: var(--icon-color);
     background-color: var(--body-bg);
 

client/web/src/repo/RepoRevisionSidebar.tsx

@@ -87,10 +87,7 @@ export const RepoRevisionSidebar: FC<RepoRevisionSidebarProps> = props => {
                         <Button
                             aria-label="Hide sidebar"
                             variant="icon"
-                            className={classNames(
-                                'position-absolute border mr-2 mb-1',
-                                styles.toggle
-                            )}
+                            className={classNames('position-absolute border mr-2', styles.toggle)}
                             onClick={() => props.handleSidebarToggle(false)}
                         >
                             <Icon aria-hidden={true} svgPath={mdiPageLayoutSidebarRight} />
@@ -113,9 +110,7 @@ export const RepoRevisionSidebar: FC<RepoRevisionSidebarProps> = props => {
                             // position, which tree is expanded)
                             behavior="memoize"
                         >
-                            <TabList
-                                wrapperClassName="mr-3 ml-5"
-                            >
+                            <TabList wrapperClassName="mr-3 ml-5">
                                 <Tab data-tab-content="files">
                                     <span className="tablist-wrapper--tab-label">Files</span>
                                 </Tab>
@@ -161,8 +156,7 @@ export const RepoRevisionSidebar: FC<RepoRevisionSidebarProps> = props => {
                         </Tabs>
                     </div>
                 </Panel>
-            )
-            }
+            )}
 
             {enableBlobPageSwitchAreasShortcuts && (
                 <>

client/web/src/repo/RepositoryFileTreePage.tsx

@@ -2,13 +2,13 @@ import { FC, useCallback, useState } from 'react'
 
 import { Navigate, useLocation } from 'react-router-dom'
 
-import settingsSchemaJSON from '../../../../schema/settings.schema.json'
 import { appendLineRangeQueryParameter } from '@sourcegraph/common'
 import { TraceSpanProvider } from '@sourcegraph/observability-client'
 import { getModeFromPath } from '@sourcegraph/shared/src/languages'
 import { isLegacyFragment, parseQueryAndHash, toRepoURL } from '@sourcegraph/shared/src/util/url'
 import { LoadingSpinner, useLocalStorage, useMatchMedia } from '@sourcegraph/wildcard'
 
+import settingsSchemaJSON from '../../../../schema/settings.schema.json'
 import { ErrorBoundary } from '../components/ErrorBoundary'
 import type { SourcegraphContext } from '../jscontext'
 import type { NotebookProps } from '../notebooks'

client/web/src/repo/blob/BlobPage.tsx

@@ -91,20 +91,20 @@ const RenderedNotebookMarkdown = lazyComponent(() => import('./RenderedNotebookM
 
 interface BlobPageProps
     extends RepoFile,
-    ModeSpec,
-    RepoHeaderContributionsLifecycleProps,
-    SettingsCascadeProps,
-    PlatformContextProps,
-    TelemetryProps,
-    ExtensionsControllerProps,
-    HoverThresholdProps,
-    BreadcrumbSetters,
-    SearchStreamingProps,
-    Pick<SearchContextProps, 'searchContextsEnabled'>,
-    Pick<StreamingSearchResultsListProps, 'fetchHighlightedFileLineRanges'>,
-    Pick<CodeIntelligenceProps, 'codeIntelligenceEnabled' | 'useCodeIntel'>,
-    NotebookProps,
-    OwnConfigProps {
+        ModeSpec,
+        RepoHeaderContributionsLifecycleProps,
+        SettingsCascadeProps,
+        PlatformContextProps,
+        TelemetryProps,
+        ExtensionsControllerProps,
+        HoverThresholdProps,
+        BreadcrumbSetters,
+        SearchStreamingProps,
+        Pick<SearchContextProps, 'searchContextsEnabled'>,
+        Pick<StreamingSearchResultsListProps, 'fetchHighlightedFileLineRanges'>,
+        Pick<CodeIntelligenceProps, 'codeIntelligenceEnabled' | 'useCodeIntel'>,
+        NotebookProps,
+        OwnConfigProps {
     authenticatedUser: AuthenticatedUser | null
     isMacPlatform: boolean
     isSourcegraphDotCom: boolean
@@ -298,7 +298,7 @@ export const BlobPage: React.FunctionComponent<BlobPageProps> = ({ className, co
 
     const blobInfoOrError = enableLazyBlobSyntaxHighlighting
         ? // Fallback to formatted blob whilst we do not have the highlighted blob
-        highlightedBlobInfoOrError || formattedBlobInfoOrError
+          highlightedBlobInfoOrError || formattedBlobInfoOrError
         : highlightedBlobInfoOrError
 
     const onExtendTimeoutClick = useCallback(
@@ -324,9 +324,9 @@ export const BlobPage: React.FunctionComponent<BlobPageProps> = ({ className, co
 
     const isSearchNotebook = Boolean(
         blobInfoOrError &&
-        !isErrorLike(blobInfoOrError) &&
-        blobInfoOrError.filePath.endsWith(SEARCH_NOTEBOOK_FILE_EXTENSION) &&
-        props.notebooksEnabled
+            !isErrorLike(blobInfoOrError) &&
+            blobInfoOrError.filePath.endsWith(SEARCH_NOTEBOOK_FILE_EXTENSION) &&
+            props.notebooksEnabled
     )
 
     const onCopyNotebook = useCallback(

client/web/src/repo/blob/own/HistoryAndOwnBar.module.scss

@@ -12,7 +12,7 @@
 .history-panel {
     padding: 0;
     display: flex;
-    align-items: stretch;
+    align-items: center;
     vertical-align: middle;
     font-weight: normal;
     letter-spacing: normal;
@@ -28,11 +28,28 @@
 
 .history {
     min-width: 0;
+    justify-content: center;
     padding: 0;
     font-size: 0.75rem;
     flex-shrink: 1000000; // Very high value to shrink this before shrinking the ownership side.
 }
 
+.toggle {
+    display: flex;
+    justify-content: center;
+    left: 0;
+    width: 2rem;
+    height: 2rem;
+    z-index: 1;
+    isolation: isolate;
+    color: var(--icon-color);
+    background-color: var(--body-bg);
+
+    &:hover {
+        background-color: var(--color-bg-3);
+    }
+}
+
 .own {
     padding: 0;
     display: flex;

client/web/src/repo/blob/own/HistoryAndOwnBar.tsx

@@ -89,14 +89,12 @@ export const HistoryAndOwnBar: React.FunctionComponent<{
             {history && (
                 <div className={styles.historyPanel}>
                     {!sidebarOpen && (
-                        <Tooltip content="Hide sidebar" placement="right">
+                        <Tooltip content="Show sidebar" placement="right">
                             <Button
-                                aria-label="Hide sidebar"
+                                aria-label="Show sidebar"
                                 variant="icon"
-                                className={classNames(
-                                    'p-2 border mr-2 hover:bg-gray',
-                                    // styles.toggle
-                                )}
+                                className={classNames(styles.toggle, 'border mr-2 mb-1')}
+                                display="inline"
                                 onClick={() => handleSidebarToggle(true)}
                             >
                                 <Icon aria-hidden={true} svgPath={mdiPageLayoutSidebarLeft} />
@@ -108,13 +106,13 @@ export const HistoryAndOwnBar: React.FunctionComponent<{
                         node={history}
                         extraCompact={true}
                         hideExpandCommitMessageBody={true}
-                        className={styles.history}
+                        className={classNames(sidebarOpen ? '' : 'mb-1', styles.history)}
                     />
                     <Button
                         variant="link"
                         size="sm"
                         display="inline"
-                        className="pt-0 pb-0 border-0"
+                        className={styles.history}
                         onClick={openHistoryPanel}
                     >
                         Show history