GH-654 Improve profile link in menu and add some borders

panda-lang · Mar 14, 2021 · a3f0272 · a3f0272
1 parent b78a1b5
commit a3f0272
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 21 deletions.
diff --git a/hub-backend/build.gradle.kts b/hub-backend/build.gradle.kts
@@ -51,10 +51,10 @@ dependencies {
     implementation("org.tinylog:slf4j-tinylog:$tinylog")
 
     testRuntimeOnly("org.junit.jupiter:junit-jupiter-engine:$junit")
-    testImplementation(kotlin("test-junit5"))
     testImplementation("org.junit.jupiter:junit-jupiter-api:$junit")
     testImplementation("org.junit.jupiter:junit-jupiter-api:$junit")
     testImplementation("org.junit.jupiter:junit-jupiter-params:$junit")
+    testImplementation(kotlin("test-junit5"))
 
     testImplementation("org.testcontainers:testcontainers:$testcontainers")
     testImplementation("org.testcontainers:junit-jupiter:$testcontainers")

diff --git a/hub-frontend/components/index/PackagePreview.js b/hub-frontend/components/index/PackagePreview.js
@@ -30,6 +30,7 @@ const PackagePreview = (props) => {
       bg={bgColor}
       shadow="sm"
       wrap="wrap"
+      borderRadius="7px"
     >
       <Flex flexDirection="column" w="full">
         <Flex

diff --git a/hub-frontend/components/layout/Header.js b/hub-frontend/components/layout/Header.js
@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react'
-
+import Link from 'next/link'
 import {
   Flex,
   Box,
   Heading,
-  Link,
+  Link as ChakraLink,
   Button,
   Img,
   Text,
@@ -49,11 +49,11 @@ const Header = (props) => {
           width={{ sm: '100px', base: 'auto' }}
           paddingY={{ sm: '0px', base: '7px' }}
         >
-          <Link href="/" _focus={{ outline: 0 }}>
+          <ChakraLink href="/" _focus={{ outline: 0 }}>
             <Heading fontSize="1.5rem" paddingRight="0px">
               Hub
             </Heading>
-          </Link>
+          </ChakraLink>
         </Box>
         <Navigation paddingY={{ sm: '0px', base: '7px' }} />
         <Profile paddingY={{ sm: '0px', base: '7px' }} />
@@ -75,15 +75,15 @@ const Navigation = (props) => {
 
 const NavigationItem = (props) => {
   return (
-    <Link
+    <ChakraLink
       href={props.href}
       fontWeight="bold"
       paddingX="13px"
       _focus={{ outline: 0 }}
       {...props}
     >
       {props.label}
-    </Link>
+    </ChakraLink>
   )
 }
 
@@ -99,14 +99,14 @@ const Profile = (props) => {
 
 const Login = (props) => {
   return (
-    <Link href={getEndpoint('/authorize/github')} {...props}>
+    <ChakraLink href={getEndpoint('/authorize/github')} {...props}>
       <Flex width="100px">
         <Text>Sign In</Text>
         <Text marginTop="4px" marginLeft="7px">
           <FaGithub fontSize="1.15rem" />
         </Text>
       </Flex>
-    </Link>
+    </ChakraLink>
   )
 }
 
@@ -137,20 +137,20 @@ const ProfileMenu = (props) => {
             <Box marginLeft="10px">{profile.login}</Box>
           </Flex>
         </MenuButton>
-        <MenuList>
+        <MenuList border="0">
+          <MenuGroup>
+            <Link href={"/profile/" + profile.login}>
+              <MenuItem as={ChakraLink}>My profile</MenuItem>
+            </Link>
+            <MenuItem>Settings </MenuItem>
+            <MenuItem onClick={handleLogout}>Logout</MenuItem>
+          </MenuGroup>
           <MenuDivider />
           <Box paddingX="12px">
             Dark mode
             <ThemeSwitch marginX="7px" />
           </Box>
           <MenuDivider />
-          <MenuGroup>
-            <MenuItem>
-              <Link href={"/profile/" + profile.login}>My profile</Link>
-            </MenuItem>
-            <MenuItem>Settings </MenuItem>
-            <MenuItem onClick={handleLogout}>Logout</MenuItem>
-          </MenuGroup>
         </MenuList>
       </Menu>
     </Flex>

diff --git a/hub-frontend/next.config.js b/hub-frontend/next.config.js
@@ -14,3 +14,4 @@
  * limitations under the License.
  */
 
+module.exports = {}
diff --git a/hub-frontend/pages/profile/[name].js b/hub-frontend/pages/profile/[name].js
@@ -76,20 +76,22 @@ const Description = (props) => {
   return (
     <Flex
       flexDirection="column"
-      width="1280px"
+      maxWidth="1280px"
+      width="100%"
+      paddingX="17px"
       {...props}
     >
       <Head>
         <title>Hub - {profile.login}'s profile</title>
       </Head>
-      <Flex bg={bgColor} padding="17px" shadow="sm">
-        <Img src={profile.avatar_url} boxSize="128px" border="2px solid black" />
+      <Flex bg={bgColor} padding="17px" shadow="sm" borderRadius="7px">
+        <Img src={profile.avatar_url} boxSize="128px" border={`2px solid #1d1d1d`} borderRadius="21px" />
         <Flex flexDirection="column" paddingX="27px">
           <Flex height="52px">
             <Text fontSize="3xl" fontWeight="bold">{profile.name}</Text>
             <Text fontSize="2xl" fontStyle="italic" paddingX="21px" paddingTop="5px">{profile.login}</Text>
           </Flex>
-          <Text whiteSpace="pre-line" bg={bioBgColor} padding="12px">{profile.bio}</Text>
+          <Text whiteSpace="pre-line" bg={bioBgColor} padding="12px" borderRadius="7px">{profile.bio}</Text>
         </Flex>
       </Flex>
     </Flex>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,3 +14,4 @@
		* limitations under the License.
		*/

		module.exports = {}