feat(admin-ui): design the layout for api role management #327

GluuFederation · Dec 2, 2021 · 96482db · 96482db
1 parent 71de0da
commit 96482db
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/app/routes/Apps/Gluu/GluuRibbon.js b/app/routes/Apps/Gluu/GluuRibbon.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import mystyle from './ribbon'
+import { useTranslation } from 'react-i18next'
+
+function GluuRibbon({ title, fromLeft, doTranslate }) {
+  const { t } = useTranslation()
+  return (
+    <div style={fromLeft ? mystyle.ribbon_left : mystyle.ribbon_right}>
+      {doTranslate ? t(title) : title}
+    </div>
+  )
+}
+
+export default GluuRibbon
diff --git a/app/routes/Apps/Gluu/ribbon.js b/app/routes/Apps/Gluu/ribbon.js
@@ -0,0 +1,28 @@
+export default {
+  ribbon_right: {
+    position: 'absolute',
+    top: '11px',
+    right: '-5px',
+    padding: '0.5rem',
+    width: '12rem',
+    background: '#00C49F',
+    zIndex: 3,
+    color: 'white',
+    borderRadius: '50px 0px 0px 50px',
+    textAlign: 'center',
+    boxShadow: '4px 4px 15px rgba(26, 35, 126, 0.2)',
+  },
+  ribbon_left: {
+    position: 'absolute',
+    top: '11px',
+    left: '-5px',
+    padding: '0.5rem',
+    width: '12rem',
+    background: '#00C49F',
+    zIndex: 3,
+    color: 'white',
+    borderRadius: '0px 50px 50px 0px',
+    textAlign: 'center',
+    boxShadow: '4px 4px 15px rgba(26, 35, 126, 0.2)',
+  },
+}