Improve enum alignment style

Author: xPaw

src/components/Docs/SchemaEnum.tsx

@@ -23,13 +23,11 @@ import {
   GridContent,
   GridIcon,
   MemberSignature,
+  SectionBadge,
 } from "./utils/styles";
 
-const EnumTypeWrapper = styled.span`
-  font-size: 16px;
-  font-weight: normal;
-  color: var(--text-dim);
-  margin-left: 8px;
+const AlignmentBadge = styled(SectionBadge)`
+  color: var(--syntax-literal);
 `;
 
 const EnumMembers = styled(CommonGroupMembers)`
@@ -85,7 +83,7 @@ export const SchemaEnumView: React.FC<{
         <CommonGroupSignature>
           <KindIcon kind="enum" size="big" />
           <DeclarationNameLink to={declPath}>{declaration.name}</DeclarationNameLink>
-          <EnumTypeWrapper>: {declaration.alignment}</EnumTypeWrapper>
+          <AlignmentBadge>{declaration.alignment}</AlignmentBadge>
           <ModuleBadge module={declaration.module} />
           <GitHubFileLink module={declaration.module} name={declaration.name} />
         </CommonGroupSignature>

src/components/Docs/utils/styles.tsx

@@ -70,24 +70,32 @@ export const SectionList = styled.div`
   gap: 5px;
 `;
 
-export const SectionLink = styled(Link)`
+const sectionBadgeStyles = `
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 3px 10px;
   border-radius: 6px;
   font-size: 14px;
-  text-decoration: none;
   color: var(--text);
   background: var(--group-members);
   border: 1px solid var(--group-border);
+`;
+
+export const SectionLink = styled(Link)`
+  ${sectionBadgeStyles}
+  text-decoration: none;
   transition: border-color 0.1s;
 
   &:hover {
     border-color: var(--highlight);
   }
 `;
 
+export const SectionBadge = styled.span`
+  ${sectionBadgeStyles}
+`;
+
 export const SectionToggle = styled.button`
   background: none;
   border: none;