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

Author: syntrydy

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

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)',
+  },
+}