eletrotupi / tcc/ commit / 2b711ef

frontend/components: adjust scale slider margins and colors for the compact version

Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago 2b711effe0b3cebf9cf475ee82a223c1623df80f Browse files
Parents 774754d
Changed files
1
Additions
+19
Deletions
-6
frontend/components/ui/ScaleSlider.tsx modified+19 -6
frontend/components/ui/ScaleSlider.tsx
1 1 
import React, { useState } from 'react';
2 2 
import {
3 3 
  View,
4 4 
  Text,
5 5 
  StyleSheet,
54 54
55 55 
  return (
56 56 
    <View style={[styles.container, style]}>
57 57
58 58 
      {/* Header row */}
59 - 
      <View style={styles.header}>
59 + 
      <View style={[styles.header, isRich ? styles.headerRich : styles.headerCompact ]}>
60 60 
        <View style={styles.labelRow}>
61 61 
          {isRich && icon && (
62 62 
            <View style={styles.iconWrapper}>{icon}</View>
63 63 
          )}
64 64 
          <Text style={[
75 75 
        ]}>
76 76 
          {valueDisplay}
77 77 
        </Text>
78 78 
      </View>
79 79
80 - 
      <View style={{ marginRight: -10, marginLeft: -10 }}>
81 - 
        {/* Slider */}
80 + 
      {/* XXX: Rich variant needs some extra margin to account for icons */}
81 + 
      <View style={{ marginRight: isRich ? -10 : -15, marginLeft: isRich ? -10 : -15 }}>
82 + 
        {/* Slider has a glitch with the full padding of it */}
82 83 
        <Slider
83 84 
          style={styles.slider}
84 85 
          minimumValue={min}
85 86 
          maximumValue={max}
86 87 
          step={step}
118 119 
  },
119 120 
  header: {
120 121 
    flexDirection: 'row',
121 122 
    justifyContent: 'space-between',
122 123 
    alignItems: 'center',
124 + 
  },
125 +
126 + 
  // Rich has bigger margin than compact
127 + 
  headerRich: {
123 128 
    marginBottom: 4,
124 129 
  },
130 +
131 + 
  headerCompact: {
132 + 
    marginBottom: 1
133 + 
  },
134 +
125 135 
  labelRow: {
126 136 
    flexDirection: 'row',
127 137 
    alignItems: 'center',
128 138 
    gap: 8,
129 139 
  },
143 153 
    fontWeight: 600
144 154 
  },
145 155
146 156 
  // Compact variant
147 157 
  labelCompact: {
148 - 
    fontSize: Theme.typography.bodyLg.fontSize,
158 + 
    fontSize: 12,
159 + 
    fontWeight: 600,
160 + 
    lineHeight: 16
149 161 
  },
150 162 
  valueCompact: {
151 - 
    fontSize: Theme.typography.bodyMd.fontSize,
152 - 
    fontWeight: Theme.typography.bodyMd.fontWeight,
163 + 
    fontSize: 12,
164 + 
    lineHeight: 16,
165 + 
    fontWeight: 600,
153 166 
    color: Theme.colors.light.textSecondary,
154 167 
  },
155 168
156 169 
  slider: {
157 170 
    width: '100%',
165 178 
  rangeLabel: {
166 179 
    ...Theme.typography.labelXs,
167 180 
    fontWeight: 500,
168 181 
  },
169 182 
});