Merge pull request #24 from codecentric/minimal-ui-improvements

A little more compact, slightly different header and footer, no more …

Author: Matthias Rütten

src/renderer/app.scss

@@ -4,6 +4,7 @@ html {
 body {
     margin: 0;
     font-family: 'IBM Plex Mono', monospace;
+    -webkit-font-smoothing: antialiased;
 }
 
 button {
@@ -16,3 +17,7 @@ button {
         transform: rotate(360deg);
     }
 }
+
+::-webkit-scrollbar {
+    display: none;
+}

src/renderer/components/layout/Footer.tsx

@@ -11,7 +11,7 @@ const closeApp = () => {
 }
 
 export const Footer = () => (
-    <Flex flexWrap='wrap' justifyContent='flex-end' bg='white' sx={{ overflow: 'hidden', borderTop: '1px solid', borderColor: 'shadow' }}>
+    <Flex flexWrap='wrap' justifyContent='flex-end' variant='barGradient' sx={{ overflow: 'hidden', borderTop: '1px solid', borderColor: 'shadow' }}>
         <RouterLink to='/config' title='Settings'>
             <Box p={2} color='gray' sx={{ ':hover': { color: 'black' } }}>
                 <SettingsIcon fontSize='small' />

src/renderer/components/layout/Header.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Box, Heading } from 'rebass'
 
 export const Header = () => (
-    <Box p={2} bg='white' sx={{ borderBottom: '1px solid', overflow: 'hidden', borderColor: 'shadow' }}>
+    <Box p={2} variant='barGradient' sx={{ borderBottom: '1px solid', overflow: 'hidden', borderColor: 'shadow' }}>
         <Heading textAlign='center' fontWeight='bold' fontSize={2}>
             Merge Requests
         </Heading>

src/renderer/components/list/MergeRequestGroup.tsx

@@ -8,7 +8,7 @@ interface MergeRequestGroupProps {
 export const MergeRequestGroup: React.FunctionComponent<MergeRequestGroupProps> = ({ label, children }) => (
     <Box>
         <Box py={1} px={2} sx={{ position: 'sticky', top: 0, borderBottom: '1px solid', borderColor: 'shadow' }} bg='siteBackground'>
-            <Text fontWeight='bold' color='blackTinted' letterSpacing={1} sx={{ textTransform: 'uppercase' }} fontSize={1}>
+            <Text fontWeight='bold' color='blackTinted' letterSpacing={1} sx={{ textTransform: 'uppercase' }} fontSize={0}>
                 {label}
             </Text>
         </Box>

src/renderer/components/theme.ts

@@ -1,6 +1,6 @@
 export const theme = {
     breakpoints: ['40em', '52em', '64em'],
-    fontSizes: [12, 14, 16, 24],
+    fontSizes: [10, 12, 16, 24],
     colors: {
         siteBackground: '#f5f5f5',
         blue: '#192CFD',
@@ -38,6 +38,10 @@ export const theme = {
             width: '2.25rem',
             height: '2.25rem',
         },
+        barGradient: {
+            backgroundColor: 'white',
+            backgroundImage: 'linear-gradient(white, #d2d2da4f)',
+        },
     },
     text: {
         uppercase: {