@controleonline/ui-common 1.2.71 → 1.2.75

package/src/react/pages/PrinterDeviceDetailPage.styles.js

@@ -0,0 +1,223 @@
+import {Platform, StyleSheet} from 'react-native';
+
+const cardShadow = Platform.select({
+  ios: {
+    shadowColor: '#0F172A',
+    shadowOffset: {width: 0, height: 4},
+    shadowOpacity: 0.06,
+    shadowRadius: 12,
+  },
+  android: {elevation: 2},
+  web: {boxShadow: '0 4px 12px rgba(15,23,42,0.06)'},
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 14,
+  },
+  scroll: {
+    paddingBottom: 28,
+    gap: 12,
+  },
+  heroCard: {
+    backgroundColor: '#fff',
+    borderRadius: 18,
+    padding: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 14,
+    ...cardShadow,
+  },
+  heroIcon: {
+    width: 44,
+    height: 44,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  heroCopy: {
+    flex: 1,
+    gap: 4,
+  },
+  heroTitle: {
+    fontSize: 17,
+    fontWeight: '800',
+    color: '#0F172A',
+  },
+  heroText: {
+    fontSize: 12,
+    lineHeight: 18,
+    color: '#64748B',
+  },
+  loadingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  loadingText: {
+    fontSize: 12,
+    color: '#64748B',
+    fontWeight: '600',
+  },
+  sectionCard: {
+    backgroundColor: '#fff',
+    borderRadius: 18,
+    padding: 16,
+    gap: 12,
+    ...cardShadow,
+  },
+  sectionTitle: {
+    fontSize: 15,
+    fontWeight: '800',
+    color: '#0F172A',
+  },
+  sectionDescription: {
+    fontSize: 12,
+    lineHeight: 18,
+    color: '#64748B',
+  },
+  statusCard: {
+    borderWidth: 1,
+    borderRadius: 14,
+    paddingHorizontal: 14,
+    paddingVertical: 13,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  statusCopy: {
+    flex: 1,
+    gap: 4,
+  },
+  statusTitleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  statusTitle: {
+    fontSize: 14,
+    fontWeight: '800',
+  },
+  statusDescription: {
+    fontSize: 12,
+    lineHeight: 18,
+    color: '#475569',
+  },
+  fieldBlock: {
+    gap: 6,
+  },
+  fieldLabel: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#475569',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 11,
+    backgroundColor: '#F8FAFC',
+    color: '#0F172A',
+    fontSize: 14,
+  },
+  readonlyInput: {
+    color: '#475569',
+    backgroundColor: '#F1F5F9',
+  },
+  inlineFields: {
+    flexDirection: 'row',
+    gap: 10,
+  },
+  inlineField: {
+    flex: 1,
+  },
+  pickerWrap: {
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    borderRadius: 12,
+    overflow: 'hidden',
+    backgroundColor: '#F8FAFC',
+  },
+  picker: {
+    minHeight: 44,
+    color: '#0F172A',
+    backgroundColor: '#F8FAFC',
+    fontSize: 14,
+  },
+  toggleRow: {
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    borderRadius: 12,
+    backgroundColor: '#F8FAFC',
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 12,
+  },
+  toggleRowActive: {
+    borderColor: 'rgba(34,197,94,0.4)',
+    backgroundColor: 'rgba(34,197,94,0.08)',
+  },
+  toggleRowLabel: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#0F172A',
+  },
+  toggleRowValue: {
+    marginTop: 4,
+    fontSize: 12,
+    color: '#64748B',
+  },
+  primaryButton: {
+    minHeight: 46,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: 8,
+    ...cardShadow,
+  },
+  primaryButtonDisabled: {
+    opacity: 0.65,
+  },
+  primaryButtonText: {
+    fontSize: 14,
+    fontWeight: '800',
+    color: '#fff',
+  },
+  actionButtonRow: {
+    flexDirection: 'row',
+    gap: 10,
+    flexWrap: 'wrap',
+  },
+  actionButton: {
+    flex: 1,
+    minWidth: 240,
+  },
+  secondaryButton: {
+    minHeight: 40,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    backgroundColor: '#fff',
+    paddingHorizontal: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: 6,
+  },
+  secondaryButtonDisabled: {
+    opacity: 0.65,
+  },
+  secondaryButtonText: {
+    fontSize: 13,
+    fontWeight: '800',
+  },
+});
+
+export default styles;