simplify dark mode styling

Author: kenjenkins

src/theme/Admonition/Types.js

@@ -1,40 +1,16 @@
-import React from 'react';
 import DefaultAdmonitionTypes from '@theme-original/Admonition/Types';
 import BusinessIcon from '@mui/icons-material/Business';
-import {useColorMode} from '@docusaurus/theme-common';
 
-// import './types.css';
-import styles from './types.module.css';
+import styles from './styles.module.css';
 
 function EnterpriseAdmonition(props) {
-  const {colorMode} = useColorMode();
-
   return (
-    <div className={
-      colorMode === 'dark'
-        ? styles.custom_admonition_dark_mode
-        : styles.custom_admonition_light_mode
-      }
-      >
-      <div className={styles.custom_admonition_header}>
-        <span><BusinessIcon style={
-          colorMode === 'dark'
-            ? {color: '#ECE5FF'}
-            : {color: 'rgb(86 83 83)'}
-          }/></span>
-        <h5 className={
-          colorMode === 'dark'
-            ? styles.custom_admonition_title_dark_mode
-            : styles.custom_admonition_title_light_mode
-          }>{props.title}</h5>
-      </div>
-      <div className={
-        colorMode === 'dark'
-          ? styles.custom_admonition_text_dark_mode
-          : styles.custom_admonition_text
-      }>
-        <p>{props.children}</p>
+    <div className={styles.enterprise}>
+      <div className={styles.enterprise_header}>
+        <BusinessIcon />
+        <h5>{props.title}</h5>
       </div>
+      {props.children}
     </div>
   );
 }

src/theme/Admonition/styles.module.css

@@ -0,0 +1,37 @@
+.enterprise {
+  border: #ededed 1px solid;
+  border-left: #6F43E7 solid 4px;
+  border-radius: 10px;
+  margin: 0 0 16px 0;
+  padding: 16px;
+  background-color: #f6f3ff;
+}
+[data-theme='dark'] .enterprise {
+  border-color: #612fea;
+  border-left-color: #ece5ff;
+  background-color: #7161ef;
+}
+
+.enterprise > :last-child {
+  margin-bottom: 0;
+}
+
+.enterprise_header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1em;
+}
+
+.enterprise_header h5 {
+  margin: 0 5px;
+  font-size: 16px;
+  color: #6F43E7;
+}
+[data-theme='dark'] .enterprise_header h5 {
+  color: #ECE5FF;
+}
+
+[data-theme='dark'] .enterprise a {
+  color: #f1e8f9;
+  font-weight: bold;
+}