Merge pull request #4662 from urbit/la/lightgray

interface: borders changed from washedGray to lightGray to match Figma mocks
2024-09-21 15:38:59 +03:00 · 2021-03-25 16:24:33 -05:00 · 2021-03-25 16:24:33 -05:00 · 1972fcba02
commit 1972fcba02
parent fab3f0ec32 fdd529a8ea
20 changed files with 28 additions and 23 deletions
--- a/pkg/interface/src/views/apps/chat/components/ChatInput.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatInput.tsx
@ -165,7 +165,7 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
        flexGrow={1}
        flexShrink={0}
        borderTop={1}
-        borderTopColor='washedGray'
+        borderTopColor='lightGray'
        backgroundColor='white'
        className='cf'
        zIndex={0}
--- a/pkg/interface/src/views/apps/launch/app.js
+++ b/pkg/interface/src/views/apps/launch/app.js
@ -194,7 +194,13 @@ export default function LaunchApp(props) {
            to="/~landscape/home"
            p={0}
          >
-            <Box p={2} height='100%' width='100%' bg='scales.black20'>
+            <Box
+              p={2}
+              height='100%'
+              width='100%'
+              bg='scales.black20'
+              border={1}
+              borderColor="lightGray">
              <Row alignItems='center'>
                <Icon
                  color="black"
--- a/pkg/interface/src/views/apps/launch/components/tiles/custom.js
+++ b/pkg/interface/src/views/apps/launch/components/tiles/custom.js
@ -12,7 +12,7 @@ export default class CustomTile extends React.PureComponent {
          position='relative'
          backgroundColor='white'
          border='1px solid'
-          borderColor='washedGray'
+          borderColor='lightGray'
          borderRadius='2'
        >
          <BaseImage
--- a/pkg/interface/src/views/apps/launch/components/tiles/tile.js
+++ b/pkg/interface/src/views/apps/launch/components/tiles/tile.js
@ -48,7 +48,7 @@ const Tile = React.forwardRef((props, ref) => {
      borderRadius={2}
      overflow="hidden"
      bg={bg || "white"}
-      color={props?.color || 'washedGray'}
+      color={props?.color || 'lightGray'}
      boxShadow={boxShadow || '0 0 0px 1px inset'}
      style={{ gridColumnStart }}
    >
--- a/pkg/interface/src/views/apps/links/components/LinkItem.tsx
+++ b/pkg/interface/src/views/apps/links/components/LinkItem.tsx
@ -112,7 +112,7 @@ export const LinkItem = (props: LinkItemProps): ReactElement => {
        width="100%"
        color='washedGray'
        border={1}
-        borderColor={isUnread ? 'blue' : 'washedGray'}
+        borderColor={isUnread ? 'blue' : 'lightGray'}
        borderRadius={2}
        alignItems="flex-start"
        overflow="hidden"
--- a/pkg/interface/src/views/apps/links/components/LinkSubmit.tsx
+++ b/pkg/interface/src/views/apps/links/components/LinkSubmit.tsx
@ -153,7 +153,7 @@ const LinkSubmit = (props: LinkSubmitProps) => {
        flexShrink={0}
        position='relative'
        border='1px solid'
-        borderColor={submitFocused ? 'black' : 'washedGray'}
+        borderColor={submitFocused ? 'black' : 'lightGray'}
        width='100%'
        borderRadius={2}
        {...bind}
--- a/pkg/interface/src/views/apps/notifications/inbox.tsx
+++ b/pkg/interface/src/views/apps/notifications/inbox.tsx
@ -130,11 +130,11 @@ export default function Inbox(props: {
        );
      })}
      {isDone ? (
-        <Center mt="2" borderTop={notifications.length !== 0 ? 1 : 0} borderTopColor="washedGray" width="100%" height="96px">
+        <Center mt="2" borderTop={notifications.length !== 0 ? 1 : 0} borderTopColor="lightGray" width="100%" height="96px">
          <Text gray fontSize="1">No more notifications</Text>
        </Center>
    )  : isLoading ? (
-        <Center mt="2" borderTop={notifications.length !== 0 ? 1 : 0} borderTopColor="washedGray" width="100%" height="96px">
+        <Center mt="2" borderTop={notifications.length !== 0 ? 1 : 0} borderTopColor="lightGray" width="100%" height="96px">
          <LoadingSpinner />
        </Center>
    ) : (
--- a/pkg/interface/src/views/apps/notifications/notifications.tsx
+++ b/pkg/interface/src/views/apps/notifications/notifications.tsx
@ -76,7 +76,7 @@ export default function NotificationsScreen(props: any): ReactElement {
                    justifyContent="space-between"
                    width="100%"
                    borderBottom="1"
-                    borderBottomColor="washedGray"
+                    borderBottomColor="lightGray"
                  >

                    <Text ref={anchorRef}>Notifications</Text>
--- a/pkg/interface/src/views/apps/publish/components/NoteNavigation.tsx
+++ b/pkg/interface/src/views/apps/publish/components/NoteNavigation.tsx
@ -96,14 +96,14 @@ export function NoteNavigation(props: NoteNavigationProps): ReactElement {
      px={2}
      borderTop={1}
      borderBottom={1}
-      borderColor="washedGray"
+      borderColor="lightGray"
      display="grid"
      alignItems="center"
      gridTemplateColumns="1fr 1px 1fr"
      gridTemplateRows="100px"
    >
      {prevComponent}
-      <Box borderRight={1} borderColor="washedGray" height="100%" />
+      <Box borderRight={1} borderColor="lightGray" height="100%" />
      {nextComponent}
    </Box>
  );
--- a/pkg/interface/src/views/apps/publish/components/NotePreview.tsx
+++ b/pkg/interface/src/views/apps/publish/components/NotePreview.tsx
@ -78,7 +78,7 @@ export function NotePreview(props: NotePreviewProps) {
        <Col
          lineHeight='tall'
          width='100%'
-          color={!isUnread ? 'washedGray' : 'blue'}
+          color={!isUnread ? 'lightGray' : 'blue'}
          border={1}
          borderRadius={2}
          alignItems='flex-start'
--- a/pkg/interface/src/views/apps/publish/components/Notebook.tsx
+++ b/pkg/interface/src/views/apps/publish/components/Notebook.tsx
@ -52,7 +52,7 @@ export function Notebook(props: NotebookProps & RouteComponentProps): ReactEleme
          </Text>
        </Box>
      </Row>
-      <Box borderBottom="1" borderBottomColor="washedGray" />
+      <Box borderBottom="1" borderBottomColor="lightGray" />
      <NotebookPosts
        graph={graph}
        host={ship}
--- a/pkg/interface/src/views/components/Body.tsx
+++ b/pkg/interface/src/views/components/Body.tsx
@ -14,7 +14,7 @@ export function Body(
        width="100%"
        borderRadius={2}
        border={border ? border : [0, 1]}
-        borderColor={['washedGray', 'washedGray']}
+        borderColor={['lightGray', 'lightGray']}
        {...boxProps}
      >
        {children}
--- a/pkg/interface/src/views/components/StatusBar.js
+++ b/pkg/interface/src/views/components/StatusBar.js
@ -77,7 +77,7 @@ const StatusBar = (props) => {
      <Row collapse>
        <Button
          width='32px'
-          borderColor='washedGray'
+          borderColor='lightGray'
          mr='2'
          px='2'
          onClick={() => history.push('/')}
--- a/pkg/interface/src/views/components/StatusBarItem.tsx
+++ b/pkg/interface/src/views/components/StatusBarItem.tsx
@ -19,7 +19,7 @@ export function StatusBarItem({
    <Button
      style={{ position: 'relative', ...floatPos }}
      border={1}
-      color="washedGray"
+      color="lightGray"
      bg="white"
      px={2}
      overflow='visible'
--- a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx
+++ b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx
@ -95,7 +95,7 @@ export function GroupSwitcher(props: {
      top="0px"
      pl='3'
      borderBottom='1px solid'
-      borderColor='washedGray'
+      borderColor='lightGray'
    >
      <Col
        bg="white"
--- a/pkg/interface/src/views/landscape/components/Home/AddFeedBanner.js
+++ b/pkg/interface/src/views/landscape/components/Home/AddFeedBanner.js
@ -37,7 +37,7 @@ export const AddFeedBanner = (props) => {
      alignItems="center"
      justifyContent="space-between"
      borderBottom={1}
-      borderColor="washedGray"
+      borderColor="lightGray"
      pl={2}
      pr={2}
    >
--- a/pkg/interface/src/views/landscape/components/Home/GroupFeedHeader.js
+++ b/pkg/interface/src/views/landscape/components/Home/GroupFeedHeader.js
@ -16,7 +16,6 @@ export function GroupFeedHeader(props) {

  const locationUrl =
    history.location.pathname.replace(`${baseUrl}`, '').replace(/^\/[a-z]*/, '');
-  console.log(locationUrl);
  let nodeIndex = locationUrl.split('/').slice(1).map((ind) => {
    return bigInt(ind);
  });
@ -48,7 +47,7 @@ export function GroupFeedHeader(props) {
      pr="2"
      alignItems="center"
      borderBottom={1}
-      borderColor="washedGray">
+      borderColor="lightGray">
      <Box display='block'>
        { ( baseUrl !== historyLocation &&
            `${baseUrl}/feed` !== historyLocation
--- a/pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx
+++ b/pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx
@ -79,7 +79,7 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
        display="flex"
        alignItems="center"
        borderBottom={1}
-        borderBottomColor="washedGray"
+        borderBottomColor="lightGray"
      >
        <Box
          borderRight={1}
--- a/pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx
+++ b/pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx
@ -73,7 +73,7 @@ export function Sidebar(props: SidebarProps): ReactElement | null {
      gridColumn="1/2"
      borderTopLeftRadius='2'
      borderRight={1}
-      borderRightColor="washedGray"
+      borderRightColor="lightGray"
      overflowY="scroll"
      fontSize={0}
      position="relative"
--- a/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx
+++ b/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx
@ -71,7 +71,7 @@ export function SidebarListHeader(props: {
         px={3}
         height='48px'
         borderBottom={1}
-         borderColor="washedGray"
+         borderColor="lightGray"
         backgroundColor={['transparent',
           props.history.location.pathname === `/~landscape${groupPath}` ||
           props.history.location.pathname.includes(`/~landscape${groupPath}/feed`)