Merge pull request #388 from shubh73/fix/ui-improvements

Author: pvinis

src/components/common/AlignDepsAlert.tsx

@@ -8,11 +8,13 @@ const AlignDepsAlert = () => (
       @rnx-kit/align-deps --requirements react-native@[major.minor]`.
     </Markdown>
     <br />
+    <br />
     <Markdown>
-      `align-deps` is an OSS tool from Microsoft that automates dependency
-      management. It knows which packages\* versions are compatible with your
-      specific version of RN, and it uses that knowledge to align dependencies,
-      keeping your app healthy and up-to-date\*\*. [Find out more
+      [`align-deps`](https://microsoft.github.io/rnx-kit/docs/tools/align-deps)
+      is an OSS tool from Microsoft that automates dependency management. It
+      knows which packages\* versions are compatible with your specific version
+      of RN, and it uses that knowledge to align dependencies, keeping your app
+      healthy and up-to-date\*\*. [Find out more
       here](https://microsoft.github.io/rnx-kit/docs/guides/dependency-management).
     </Markdown>
     <br />

src/components/common/Diff/Diff.tsx

@@ -21,7 +21,7 @@ import type { ChangeEventArgs } from 'react-diff-view'
 import type { DefaultRenderToken } from 'react-diff-view/types/context'
 
 const copyPathPopoverContentOpts = {
-  default: 'Click to copy file path',
+  default: 'Copy file path',
   copied: 'File path copied!',
 }
 

src/components/common/Diff/DiffHeader.tsx

@@ -131,12 +131,18 @@ interface CompleteDiffButtonProps extends ButtonProps {
 }
 
 const CompleteDiffButton = styled(
-  ({ open, onClick, ...props }: CompleteDiffButtonProps) =>
-    open ? (
-      <Button {...props} icon={<RollbackOutlined />} onClick={onClick} />
-    ) : (
-      <Button {...props} icon={<CheckOutlined />} onClick={onClick} />
-    )
+  ({ open, onClick, ...props }: CompleteDiffButtonProps) => (
+    <Popover
+      content={open ? 'Mark as not viewed' : 'Mark as viewed'}
+      trigger="hover"
+    >
+      {open ? (
+        <Button {...props} icon={<RollbackOutlined />} onClick={onClick} />
+      ) : (
+        <Button {...props} icon={<CheckOutlined />} onClick={onClick} />
+      )}
+    </Popover>
+  )
 )`
   ${defaultIconButtonStyle}
   &,
@@ -171,7 +177,7 @@ const CopyPathToClipboardButton = styled(
         content={copyPathPopoverContent}
         trigger="hover"
         overlayStyle={{
-          width: '175px',
+          width: '140px',
           textAlign: 'center',
         }}
       >
@@ -188,7 +194,7 @@ const CopyPathToClipboardButton = styled(
 `
 
 const copyAnchorLinks = {
-  default: 'Click to copy anchor link',
+  default: 'Copy anchor link',
   copied: 'Anchor link copied!',
 }
 
@@ -199,6 +205,7 @@ interface CopyAnchorLinksToClipboardButtonProps
   toVersion: string
   type: string
 }
+
 const CopyAnchorLinksToClipboardButton = styled(
   ({
     id,
@@ -226,7 +233,7 @@ const CopyAnchorLinksToClipboardButton = styled(
           content={content}
           trigger="hover"
           overlayStyle={{
-            width: '175px',
+            width: '150px',
             textAlign: 'center',
           }}
         >
@@ -244,12 +251,17 @@ const CopyAnchorLinksToClipboardButton = styled(
 `
 
 const CollapseClickableArea = styled.div`
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+
   &:hover {
     cursor: pointer;
   }
-`
 
+  & > *:last-child {
+    margin-left: 8px;
+  }
+`
 interface CollapseDiffButtonProps extends ButtonProps {
   open: boolean
   isDiffCollapsed: boolean
@@ -258,10 +270,15 @@ interface CollapseDiffButtonProps extends ButtonProps {
 
 const CollapseDiffButton = styled(
   ({ open, isDiffCollapsed, ...props }: CollapseDiffButtonProps) =>
-    open ? <Button {...props} type="link" icon={<DownOutlined />} /> : null
+    open ? (
+      <Button
+        {...props}
+        type="link"
+        icon={<DownOutlined style={{ height: 12, width: 12 }} />}
+      />
+    ) : null
 )`
   color: ${({ theme }) => theme.text};
-  margin-right: 2px;
   font-size: 10px;
   transform: ${({ isDiffCollapsed }) =>
     isDiffCollapsed ? 'rotate(-90deg)' : 'initial'};
@@ -343,7 +360,7 @@ const DiffHeader = ({
             oldPath={sanitizedFilePaths.oldPath}
             newPath={sanitizedFilePaths.newPath}
             type={type}
-          />{' '}
+          />
           <FileStatus type={type} />
           <BinaryBadge open={!hasDiff} />
         </CollapseClickableArea>
@@ -354,14 +371,13 @@ const DiffHeader = ({
           onCopy={onCopyPathToClipboard}
           copyPathPopoverContent={copyPathPopoverContent}
           resetCopyPathPopoverContent={resetCopyPathPopoverContent}
-        />
+        />{' '}
         <CopyAnchorLinksToClipboardButton
           id={id}
           type={type}
           fromVersion={fromVersion}
           toVersion={toVersion}
         />
-
         <DiffCommentReminder
           comments={diffComments}
           isDiffCollapsed={isDiffCollapsed}
@@ -388,7 +404,7 @@ const DiffHeader = ({
           version={toVersion}
           path={newPath}
           packageName={packageName}
-        />
+        />{' '}
         <CompleteDiffButton
           open={isDiffCompleted}
           onClick={() => onCompleteDiff(diffKey)}

src/components/common/UpgradeButton.tsx

@@ -15,7 +15,7 @@ const Container = styled.div`
 `
 
 const Button = styled(AntdButton)`
-  border-radius: 3px;
+  border-radius: 5px;
 `
 
 interface UpgradeButtonProps extends React.PropsWithRef<ButtonProps> {

src/components/common/UpgradeSupportAlert.tsx

@@ -30,10 +30,6 @@ const UpgradeSupportAlert = styled((props: UpgradeSupportAlertProps) => (
 ))`
   span > a {
     color: ${({ theme }) => theme.link}};
-
-    &:hover {
-      color: ${({ theme }) => theme.linkHover}};
-    }
   }
 `
 

src/components/common/UsefulContentSection.tsx

@@ -122,7 +122,13 @@ const HideContentButton = styled(
     <Button
       {...props}
       type="link"
-      icon={isContentOpen ? <UpOutlined /> : <DownOutlined />}
+      icon={
+        isContentOpen ? (
+          <UpOutlined style={{ height: 14, width: 14 }} />
+        ) : (
+          <DownOutlined style={{ height: 14, width: 14 }} />
+        )
+      }
       onClick={toggleContentVisibility}
     />
   )

src/components/common/VersionSelector.tsx

@@ -18,20 +18,14 @@ export const testIDs = {
 const Selectors = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  gap: 15px;
+  gap: 16px;
 
   @media ${deviceSizes.tablet} {
     flex-direction: row;
-    gap: 0;
   }
 `
 
-const FromVersionSelector = styled(Select)`
-  @media ${deviceSizes.tablet} {
-    padding-right: 5px;
-  }
-`
+const FromVersionSelector = styled(Select)``
 
 interface ToVersionSelectorProps extends SelectProps {
   popover?: React.ReactNode
@@ -47,11 +41,7 @@ const ToVersionSelector = styled(
     ) : (
       <Select {...props} />
     )
-)`
-  @media ${deviceSizes.tablet} {
-    padding-left: 5px;
-  }
-`
+)``
 
 const getVersionsInURL = (): {
   fromVersion: string

src/components/pages/Home.tsx

@@ -73,29 +73,19 @@ const TitleContainer = styled.div`
 
 const AppNameField = styled.div`
   width: 100%;
-
-  @media ${deviceSizes.tablet} {
-    padding-right: 5px;
-  }
 `
 
 const AppPackageField = styled.div`
   width: 100%;
-
-  @media ${deviceSizes.tablet} {
-    padding-left: 5px;
-  }
 `
 
 const AppDetailsContainer = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  gap: 15px;
+  gap: 16px;
 
   @media ${deviceSizes.tablet} {
     flex-direction: row;
-    gap: 0;
   }
 `